在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. 芯灵思Sinlinx A64开发板 Linux内核等待队列poll ---阻塞与非阻塞

    开发平台 芯灵思Sinlinx A64 内存: 1GB 存储: 4GB 开发板详细参数 https://m.tb.cn/h.3wMaSKm 开发板交流群 641395230 阻塞:阻塞调用是指调用结果 ...

  2. leetcode中的python学习

    list.extend() list1.extend(list2(or string)) 将list2(or string)的所有元素添加到list1中: list1.append(list2(or ...

  3. SQL语句整理

  4. 我提出了一个 Lean Html 5 的 概念 和 标准

    提出 Lean Html 5 是因为 Html 可以作为 一个 应用程序 开发 的 标准 和 平台, 应用程序 包括 Web 程序 , 本地程序 , 桌面程序 , 嵌入式程序 , 串口通信 等 . L ...

  5. vue-router 路由跳转：和name配对的是params，和path配对的是query

    1.命名路由name搭配params,刷新页面参数会丢失 2.路由path搭配query,刷新页面数据不会丢失 3.接收参数使用this.$router,就能获取到参数的值

  6. Win7下，nginx默认80端口被System占用，造成nginx启动报错

    在win7 32位旗舰版下,启动1.0.8版本nginx,显示如下错误: 2012/04/02 13:55:59 [emerg] 7864#2376: bind() to 0.0.0.0:80 fai ...

  7. [蓝桥杯]PREV-25.历届试题_城市建设

    问题描述 栋栋居住在一个繁华的C市中,然而,这个城市的道路大都年久失修.市长准备重新修一些路以方便市民,于是找到了栋栋,希望栋栋能帮助他. C市中有n个比较重要的地点,市长希望这些地点重点被考虑.现在 ...

  8. C++ 线性搜索算法演示的代码

    将做工程过程中比较好的内容做个备份,下边代码段是关于C++ 线性搜索算法演示的代码. #include<iostream>#include<conio> int linears ...

  9. node-js：文摘

    ES6相关 1.module.exports与exports,export与export default之间的关系和区别 nodejs基础 1.NodeJs安装与全局配置(不建议修改包的全局安装路径, ...

  10. SQL server 2008(Linux安装)

    今天应公司的要求,需要在阿里云上安装sql server 在本地使用,由于自己原来没有涉及过这样的安装所以走了很多的弯路.现在将我的安装过程与大家分享,希望能够帮到想要学习这个方面的人.以下是我用Ce ...