在css3 中，有一个转换效果，也可以替代js,并且比 js 做得好，那就是转换，即transform 属性，只需要个这个属性加上值，就可以实现转化效果了;有三种值，平移（translate），旋转(rotate)*和缩放(scale);

1. transform:translate

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <meta name="viewport" content="width=device-width, initial-scale=1.0">

     <meta http-equiv="X-UA-Compatible" content="ie=edge">

     <title>Document</title>

     <style>

         div.nei {

             width: 200px;

             height: 200px;

             margin: 100px auto 0;

             background: red;

         }

         div.canzhao {

             margin-top: 10px;

             text-align: center;

         }

     </style>

 </head>

 <body>

     <div class="abox">

         <div class="nei"></div>

         <div class="canzhao">这里是中间参照</div>

     </div>

 </body>

 </html>

初始状态：

加上transform:translate(-100px,0) 之后;

  div.nei {

             width: 200px;

             height: 200px;

             margin: 100px auto 0;

             background: red;

         }

         div.canzhao {

             margin-top: 10px;

             text-align: center;

         }

         div.abox:hover .nei {

             transform: translate(-100px, 0);

         }

运行结果：向左移动了100px

这里 translate(-100x,0)；第一个参数代表x 轴，第二个参数代表y轴

一般情况下，转换配合着过渡的话，效果会更好，如下，加入过渡：

  div.nei {

             width: 200px;

             height: 200px;

             margin: 100px auto 0;

             background: red;

             /* /////加入过渡 */

             transition: all 2s;

         }

         div.canzhao {

             margin-top: 10px;

             text-align: center;

         }

         div.abox:hover .nei {

             transform: translate(-100px);

         }

2. transform:rotate();

  div.nei {

             width: 200px;

             height: 200px;

             margin: 100px auto 0;

             background: red;

             /* /////加入过渡 */

             transition: all 2s;

         }

         div.canzhao {

             margin-top: 10px;

             text-align: center;

         }

         div.abox:hover .nei {

             /* transform: translate(-100px); */

             transform: rotate(35deg);

         }

运行结果：围绕中心点进行旋转

3.transform:scale();

  div.nei {

             width: 200px;

             height: 200px;

             margin: 100px auto 0;

             background: red;

             /* /////加入过渡 */

             transition: all 2s;

         }

         div.canzhao {

             margin-top: 10px;

             text-align: center;

         }

         div.abox:hover .nei {

             /* transform: translate(-100px); */

             /* transform: rotate(35deg); */

             transform: scale(1.5, 1);

         }

设置缩放：scale(1.5,0),第一个参数为x轴，第二个参数为y轴，运行结果：

如果只是需要x轴或者y 轴进行缩放的话，可以改成 transform:scaleX(1.5),或者缩放y轴 transform:scale(1.0);

如果平移，缩放，旋转都需要同时进行的话，可以写在一起，用空格隔开即可

   div.nei {

             width: 200px;

             height: 200px;

             margin: 100px auto 0;

             background: red;

             /* /////加入过渡 */

             transition: all 2s;

         }

         div.canzhao {

             margin-top: 10px;

             text-align: center;

         }

         div.abox:hover .nei {

             /* transform: translate(-100px); */

             /* transform: rotate(35deg); */

             /* transform: scale(1.5, 1); */

             transform: translate(-100px) rotate(35deg) scale(1.5, 1);

         }

运行结果：

注意：当使用旋转时，会改变元素的坐标系

另外：在转换变化中，还有一个属性，就是transform-origin  ，通过这个属性，可以设置转换的参照点，yinwei默认清空下，是参照元素的中心点进行的

  div.nei {

             width: 200px;

             height: 200px;

             margin: 100px auto 0;

             background: red;

             /* /////加入过渡 */

             transition: all 2s;

         }

         div.canzhao {

             margin-top: 10px;

             text-align: center;

         }

         div.abox:hover .nei {

             /* transform: translate(-100px); */

             transform: rotate(35deg);

             /* ////设置参照点 参照左上角进行*/

             transform-origin: 0px 0px;

             /* transform: scale(1.5, 1); */

             /* transform: translate(-100px) rotate(35deg) scale(1.5, 1); */

         }

运行结果：

这里 transform-origin:0px 0px;  第一个数x轴的位置，第二个是y 轴的位置，使用空格隔开两个参数；另外接受百分比作为参数，也接受名称定位作为参数（如 left center right top bottom）;

默认情况下，在旋转时，是围绕z 轴在进行旋转

如果想要看到围绕x 轴或者围绕y 轴旋转的效果，需要在旋转目标的上级元素上加入一个 perspective 属性；这样，会让人看到近大远小的效果

  div.nei {

             width: 200px;

             height: 200px;

             margin: 100px auto 0;

             background: red;

             /* /////加入过渡 */

             transition: all 2s;

         }

         div.canzhao {

             margin-top: 10px;

             text-align: center;

         }

         div.abox {

             perspective: 300px;

         }

         div.abox:hover .nei {

             /* transform: translate(-100px); */

             transform: rotateX(35deg);

             /* ////设置参照点 参照左上角进行*/

             transform-origin: 0px 0px;

             /* transform: scale(1.5, 1); */

             /* transform: translate(-100px) rotate(35deg) scale(1.5, 1); */

         }

运行结果:

这里：perspective:300px；

300px 表示距离元素300px 在观察，距离越近，效果越明显，距离越远，效果越不明显

默认情况下，perspective 属性加在转换元素的直接父级元素上

css 效果之转换的更多相关文章

  1. 小tip: 使用CSS将图片转换成模糊(毛玻璃)效果

    去年盛夏之时,曾写过“小tip: 使用CSS将图片转换成黑白”一文,本文的模式以及内容其实走得是类似路线.CSS3 → SVG → IE filter → canvas. 前段时间,iOS7不是瓜未熟 ...

  2. [转] 小tip: 使用CSS将图片转换成模糊(毛玻璃)效果 ---张鑫旭

    by zhangxinxu from http://www.zhangxinxu.com本文地址:http://www.zhangxinxu.com/wordpress/?p=3804 去年盛夏之时, ...

  3. 使用CSS将图片转换成黑白(灰色、置灰)z转

    小tip: 使用CSS将图片转换成黑白(灰色.置灰) by zhangxinxu from http://www.zhangxinxu.com 本文地址:http://www.zhangxinxu.c ...

  4. CSS中2d转换：transition过渡放在:hover伪类中与应用在整个元素中区别

    css的2d转换十分强大,能够在不使用js的情况下,实现页面的元素与用户之间更多动态的交互,增强用户体验.其中使用最多的就是hover伪类. 1.创建一个页面的div元素: <!DOCTYPE ...

  5. 小tip: 使用CSS将图片转换成黑白(灰色、置灰)[转]

        小tip: 使用CSS将图片转换成黑白(灰色.置灰) 这篇文章发布于 2012年08月19日,星期日,20:41,归类于 css相关, SVG相关. 阅读 159943 次, 今日 146 次 ...

  6. [转载] 高大上的 CSS 效果：Shape Blobbing

    这篇大部分是转载,来自<高大上的 CSS 效果:Shape Blobbing>和 <Shape Blobbing in CSS> 有部分是自己理解和整理,配合效果要做出 app ...

  7. CSS 效果汇总

    只要决心够, 就能征服痛苦. 把一些常用的 CSS 效果记录下来 1. 利用 z-index :hover 显示层 github 效果地址>> 此效果主要利用 a:hover 来改变 sp ...

  8. CSS效果：这里有你想要的CSS3漂亮的自定义Checkbox各种复选框

    在原来有一篇文章写到了<CSS效果篇--纯CSS+HTML实现checkbox的思路与实例>. 今天这篇文章主要写各种自定义的checkbox复选框,实现如图所示的复选框: 大致的html ...

  9. CSS效果篇--这里有你想要的CSS3漂亮的自定义Checkbox各种复选框

    在原来有一篇文章写到了<CSS效果篇--纯CSS+HTML实现checkbox的思路与实例>.这篇文章主要写各种自定义的checkbox复选框,实现如图所示的复选框: 大致的html代码都 ...

随机推荐

  1. Xunit和Nunit的区别

    https://www.cnblogs.com/Leo_wl/p/5727712.html 舍弃Nunit拥抱Xunit   前言 今天与同事在讨论.Net下测试框架的时候,说到NUnit等大多数测试 ...

  2. Yii2 设计模式——设计模式简介

    我们首先来思考一个问题:作为工程师,我们的价值是什么? 笔者认为是——解决用户问题. 我们的任何知识和技能,如果不能解决特定的问题,那么就是无用的屠龙之术:我们的任何经验,如果不能对解决新的问题有用, ...

  3. js中this最简单清晰的解释

    引自  https://www.cnblogs.com/huangwentian/p/6854472.html#commentform ① this指向的,永远只可能是对象!       ② this ...

  4. ningx.conf location

    server { listen ; server_name localhost; location /dirName { alias "C:/Users/VALEB/Downloads/in ...

  5. StringRedisTemplate常用操作

    stringRedisTemplate.opsForValue().set("test", "100",60*10,TimeUnit.SECONDS);//向r ...

  6. 报错：ERROR ParcelUpdateService:com.cloudera.parcel.components.ParcelDownloaderImpl: Unable to retrieve remote parcel repository manifest

    报错背景: CDH断电后重启失败,解决了种种错误之后,重启成功,但是重启之后的服务器没有任何进程, 查看/opt/cm-5.15.1/log/cloudera-scm-server/cloudera- ...

  7. 在socket的server端处理client端发来的数据

    一.楔子 最近做了一个需求遇到一个坑,归结成一个小问题,其实就是在socket的server端处理client端发来的数据的问题,现将这个问题总结一下,本文将数据在server端以字典的形式存储. 另 ...

  8. android 版本号大小比较

    https://www.jianshu.com/p/ee1990270ee1 网上找了很多方法都不太靠谱,有问题,自己改了改,亲试可以 大家都知道,版本号一般由以下几部分组成: 1. 主版本号 2. ...

  9. jumpservice一步一步安装

    一步一步安装 (CentOS) 本文档旨在帮助用户了解各组件之间的关系, 生产环境部署建议参考 进阶安装文档 云服务器快速部署参考 极速安装 安装过程中遇到问题可参考 安装过程中常见的问题 测试推荐环 ...

  10. 适用于移动设备弹性布局的js脚本(rem单位)

    背景介绍 目前,随着移动设备的普及和4G网络的普及,web在移动端的占比已经远远超过PC端,各种H5页面推广页面,H5小游戏热度火爆.以前简单的使用px单位(没有弹性)的时代已经无法满足各位设计师和用 ...