无论你是前端还是设计师，相信你在网页二维空间上的操作早已经得心应手，JS处理时间线的动画也早已经 烂熟于胸。从今天开始，我跟大家分享一些“新”的东西，网页的第三个维度，以及纯CSS实现的动画。限于篇幅，从初级到比较复杂的3D动画大概会说个三四 个回合，我们就从最初级的东西开始说，由于这些知识大部分都是我个人根据文档所理解的，主要是当笔记。所以，也许会跟不少同学所理解的不太一样，甚至相 悖，我希望大家可以在文章下面指出不对的地方，我们共同来学习。

在我们以前使用绝对定位的时候就已经初步接触过Z轴，那时候只是简单的层叠，现在介绍一个更强大的属性：Transform 。

从字面上就能看出，Transform 是 变型 的意思，他的值主要包括 旋转rotate，扭曲skew，缩放scale，移动translate以及矩阵变形matrix 。

这次我主要拿 rotate 来写例子，因为他能更好的配合后面3D的部分，其他的几个参数大家只需要挨个替换一下，就能明白他们的用法。

3D Transform 中 rotate 有三种方法，rotateX(angle) X轴旋转，rotateY(angle) Y轴旋转，rotateZ(angle) Z轴旋转。

XYZ表示一个平面以哪个轴为坐标来旋转，里面的值是他的角度。为了更形象一点，请看这张图

  1. transform: perspective(800);

或者直接使用 perspective 属性:

  1. perspective: 800;

perspective可以写在画布（父元素）上，也可以直接写在元素本身上，对于一张画布只有一个变型体的时候，几乎没有差别。但是当一个画布上 有多个变型体的时候，两种写法的差别立即就表现出来了。就像这张图，黄色的部分，perspective直接写在色块上，紫色的部 分，perspective写在了父容器上，以画布作为透视元素，所以子元素的形态都是不一样的。

perspective的值，则是决定3D变形效果的强度的，这个值大致可以理解为远近。只越大，你离物体就越远。就像一个离你很远的正方体（比如魔方）在做旋转，他的视觉效果就比较弱，但是如果这个魔方在你的眼前旋转，那么效果就比较强烈。

而这里我们会用到一个新的Transform的参数，translateZ。

前面rotateZ已经让我们找到了Z轴，translateZ就可以用来处理Z轴的坐标。让元素在自己的眼前或近或远。他的值是要参考父元素的perspective值。

比如父元素的perspective值是800，那么子元素translateZ的值越小，就表示子元素离我们越远，看起来也就越小。当子元素的 translateZ接近800但是小于800的时候，比如790+，那么这个元素会撑满整个屏幕（注意，会超出浏览器），因为这个时候表示这个元素已经 到了你眼前，眼前就是一片小树叶也是可以遮挡住后面所有东西的。当子元素超过了800，就表示这个元素已经到了我们眼睛后面，我们是看不见自己后脑勺以后 的东西的，元素就会消失不见。

（这里稍微提一下，我们上面那三个平面旋转的图，大家能看到在Y或者Y轴的旋转到90度的时候，图形消失了，这是因为90度的时候平面与我们的视线平行，面是没有厚度的，所以也会消失不见。当夹角变大之后又会重新出现，这个被成为视觉盲区。）

简单的讲过透视之后，再来看一个属性 perspective-origin ，透视原点。

这个属性就很好理解了，就是透视点的位置，如果你会使用flash，那么perspective-origin就相当于flash里面的对齐点，当你做动画处理的时候，元素会围绕这个对齐点来旋转什么的。CSS3里默认perspective-origin是元素的中心。

当有了透视，有了变型之后，就该用到transform-style这个属性了，他有两个参数，flat与preserve-3d。flat为默认值，表示平面的；后者preserve-3d表示3D透视。

大家可以简单的理解为这是开启3D空间的方法 ：

  1. transform-style: preserve-3d；

仅仅是开关，这个属性不会对我们的画面造成任何影响，除非你用flat。

3D世界里还有一个原理就是，你无法穿过一个物体看到他后面的物体，除非这个物体是透明的，这里我们就用到一个属性，backface-visibility，当他的值为hidden的时候，就是正常的3D世界，当不写这个属性的时候…….我建议大家试试。

现在简单的几何原理都有了，我们可以让平面变3D的过程动态的演示出来了，就是css3的 Animation ！

在了解Animation之前，我们必须了解另一个特殊的东西，Keyframes。

这里用过flash的同学一看就能明白，就是关键帧，每一个关键帧代表动画的一个过程节点，Keyframes具有其自己的语法规则，他的命名是 由”@keyframes”开头，后面紧接着是这个“动画的名称”加上一对花括号“{}”，括号中就是一些不同时间段样式规则，有点像我们css的样式写 法一样。例如：

  1. @-moz-keyframes name{
  2.      0% {
  3.        -moz-transform:rotateY(0deg) rotateX(0deg) rotateZ(0deg) translateZ(0px);
  4.      }
  5.      25% {
  6.        -moz-transform:rotateY(90deg) rotateX(0deg) rotateZ(0deg) translateZ(0px);
  7.      }
  8.      50% {
  9.        -moz-transform:rotateY(180deg) rotateX(0deg) rotateZ(0deg) translateZ(0px);
  10.      }
  11.      75% {
  12.        -moz-transform:rotateY(90deg) rotateX(0deg) rotateZ(0deg) translateZ(0px);
  13.      }
  14.      100% {
  15.        -moz-transform:rotateY(0eg) rotateX(0deg) rotateZ(0deg) translateZ(0px);
  16.      }
  17.   }

这里，name是动画的名称，百分比里边只要写你要实现的动画就行，可以写位移啊，色值变化啊，透明度变化啊等等。

然后我们再看一下Animation的几个常用属性：

  1. animation-name:'name';/*动画属性名，也就是我们前面keyframes定义的动画名*/
  2. animation-duration: 2s;/*动画持续时间*/
  3. animation-timing-function: linear;
  4. /*
  5. 动画频率，有匀速，先快后慢    linear：动画以匀速运动
  6. ease：默认值，开始慢，中间快，结束慢，不对称
  7. ease-in：开始慢，后面快
  8. ease-out：开始快，后面慢
  9. ease-in-out：开始慢，中间快，结束慢，对称（注意与ease的区别）
  10. cubic-bezier(n,n,n,n)：可以使用cubic-bezier自定义速度，n的取值从0到1
  11. */
  12. animation-delay: 2s;/*动画延迟时间*/
  13. animation-iteration-count: 1;/*定义循环资料，infinite为无限次*/
  14. animation-direction: alternate;/*定义动画方式， normal 动画仅正向播放。 alternate 动画正向播放奇数次迭代，并反向播放偶数次迭代。在反向播放周期中，与 animation-timing-function 关联的值也会反转。*/

这些属性，看字面就能理解了，就不详细解释，用在例子里是最形象的。这里先写一个简单平面旋转的例子，就本例子而言，webkit核心的浏览器处理变型跟动画明显是最好的，而moz下会有明显的锯齿出现。

  1.   <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5. <title>无标题文档</title>
  6. <style>
  7. *{margin:0;
  8. padding:0;}
  9. .wrapper1{
  10.     width:150px;
  11.     height:191px;
  12.     border:#eee 1px solid;
  13.     border-radius:10px;
  14.     padding:2px;
  15.     float:left;
  16.     margin:200px 0 0 50px;
  17.     -moz-perspective:800px;
  18.       -moz-transform-style:preserve-3d;
  19.       -webkit-perspective:800px;
  20.       -webkit-transform-style:preserve-3d;
  21.       -moz-backface-visibility:;
  22.     -webkit-backface-visibility:hidden;
  23. }
  24. .box1{
  25.     width:150px;
  26.     height:191px;
  27.     background:url(http://www.internetke.com/uploads/imgbg/other/rut.jpg);
  28.     border-radius:10px;
  29.     -webkit-animation-name:wobble;
  30.   -webkit-animation-duration: 5s;
  31.   -webkit-animation-timing-function: linear;
  32.   -webkit-animation-delay: 0;
  33.   -webkit-animation-iteration-count: infinite;
  34.   -webkit-animation-direction: ;
  35.   -moz-animation-name:wobble;
  36.   -moz-animation-duration: 5s;
  37.   -moz-animation-timing-function: linear;
  38.   -moz-animation-delay: 0;
  39.   -moz-animation-iteration-count: infinite;
  40.   -moz-animation-direction: ;
  41. }
  42. @-webkit-keyframes wobble{
  43.      0% {
  44.           -webkit-transform:rotateY(0deg) rotateX(0deg) rotateZ(0deg) translateZ(0px);
  45.      }
  46.      25% {
  47.           -webkit-transform:rotateY(90deg) rotateX(0deg) rotateZ(0deg) translateZ(0px);
  48.      }
  49.      50% {
  50.           -webkit-transform:rotateY(180deg) rotateX(0deg) rotateZ(0deg) translateZ(0px);
  51.      }
  52.      75% {
  53.           -webkit-transform:rotateY(90deg) rotateX(0deg) rotateZ(0deg) translateZ(0px);
  54.      }
  55.      100% {
  56.           -webkit-transform:rotateY(0deg) rotateX(0deg) rotateZ(0deg) translateZ(0px);
  57.      }
  58.   }
  59. @-moz-keyframes wobble{
  60.      0% {
  61.            -moz-transform:rotateY(0deg) rotateX(0deg) rotateZ(0deg) translateZ(0px);
  62.      }
  63.      25% {
  64.            -moz-transform:rotateY(90deg) rotateX(0deg) rotateZ(0deg) translateZ(0px);
  65.      }
  66.      50% {
  67.            -moz-transform:rotateY(180deg) rotateX(0deg) rotateZ(0deg) translateZ(0px);
  68.      }
  69.      75% {
  70.            -moz-transform:rotateY(90deg) rotateX(0deg) rotateZ(0deg) translateZ(0px);
  71.      }
  72.      100% {
  73.            -moz-transform:rotateY(0eg) rotateX(0deg) rotateZ(0deg) translateZ(0px);
  74.      }
  75.   }
  76. </style>
  77. </head>
  78. <body>
  79. <div class="wrapper1">
  80.     <div class="box1"></div>
  81. </div>
  82. </body>
  83. </html>
  84.

题外话：希望大家不要因为IE9以下版本的不兼容就延迟学习新的东西，那就会处处比别人慢一步。另外，从Safari开始，浏览器已经可以由3D函数触发硬件加速。

CSS3动画属性Transform解读的更多相关文章

  1. CSS3中动画属性transform、transition 和 animation

    CSS3中和动画有关的属性有三个 transform.transition 和 animation.下面来一一说明:        transform   从字面来看transform的释义为改变,使 ...

  2. 基于css3新属性transform及原生js实现鼠标拖动3d立方体旋转

    基于css3新属性transform,实现3d立方体的旋转 通过原生JS,点击事件,鼠标按下.鼠标抬起和鼠标移动事件,实现3d立方体的拖动旋转,并将旋转角度实时的反应至界面上显示 实现原理:通过获取鼠 ...

  3. CSS3动画属性animation的用法

    转载: 赞生博客 高端订制web开发工作组 » CSS3动画属性animation的用法 CSS3提供了一个令人心动的动画属性:animation,尽管利用animation做出来的动画没有flash ...

  4. Css3动画属性总汇

    http://css3lib.alloyteam.com/uilib/animation/demo1/#cta Css3动画属性总汇 Stay hungry. Stay foolish. Attent ...

  5. CSS3中动画属性transform、transition和animation

    Transform:变形 在网页设计中,CSS被习惯性的理解为擅长表现静态样式,动态的元素必须借助于javascript才可以实现,而CSS3的出现改变了这一思维方式.CSS3除了增加革命性的创新功能 ...

  6. css3之动画属性transform、transition、animation

    工作当中,会遇到很多有趣的小动画,使用css3代替js会节省工作量,css3一些属性浏览器会出现不兼容,加浏览器的内核前缀 -moz-. -webkit-. -o- 1.transform rotat ...

  7. CSS3动画属性：变形(transform)

    Transform字面上就是变形,改变的意思.在CSS3中transform主要包括以下几种:旋转rotate.扭曲skew.缩放scale和移动translate以及矩阵变形matrix. 语法 t ...

  8. 如何制作css3的3d动画——以骰子旋转为例，详解css3动画属性

    首先先来看两个用css3实现的炫酷的3d动画效果 1 2 3 4 5   6 你没看错,这个炫酷的效果都是用css3实现的. 下面是动画实现所需要用到的几个css3属性. 1.perspective: ...

  9. 使用CSS3动画属性实现各种旋转跳跃

    Transform字面上就是变形,改变的意思.在CSS3中transform主要包括以下几种:旋转rotate.扭曲skew.缩放scale和移动translate以及矩阵变形matrix. tran ...

随机推荐

  1. Event的Propagate

    SSIS Package的Executable存在层次结构,例如Package位于层次结构的最顶层,Root Level:Container是其中包含的Executable(Task 或 Contai ...

  2. Sql Server系列：Transact-SQL变量

    变量是Transact-SQL中由用户定义.可对其赋值并参与运算的一个实体,分为全局变量和局部变量.其中全局变量由系统自定义并维护,全局变量名称前面有@@字符,任何程序均可随时调用.局部变量名称前面有 ...

  3. LINQ系列：Linq to Object元素操作符

    元素操作符从一个序列返回单个指定的元素. 1. DefaultIfEmpty DefaultIfEmpty操作符将一个空集合替换为包含默认的单个值的集合.在返回序列为空且又需要返回一些对象时,可以通过 ...

  4. 【Win10 应用开发】自适应Toast通知的XML文档结构

    老规矩,在开始之前老周先讲个故事. 话说公元2015年7月20日,VS 2015发布.于是,肯定有人会问老周了,C#6有啥新特性,我学不来啊.学不来的话你应该检讨.老周比较保守地计算一下,学会C# 6 ...

  5. 了解HTML锚点

    概念 <a>元素 (或HTML锚元素, Anchor Element)通常用来表示一个锚点/链接.但严格来说,<a>元素不是一个链接,而是超文本锚点,可以链接到一个新文件.用i ...

  6. 前端学PHP之面向对象系列第二篇——魔术方法

    × 目录 [1]构造方法 [2]析构方法 [3]不可访问属性[4]对象复制[5]字符串[6]对象不存在[7]自动加载类[8]串行化[9]函数调用 前面的话 php在面向对象部分有很多相关的魔术方法,这 ...

  7. 《HTML重构》读书笔记&思维导图

    最近读了<HTML重构>这本书,以下做出自己的总结归纳,大家可以一起学习交流. 什么是重构?重构是在不改变程序行为的基础上进行小的改动是代码基本逐渐完善的过程,通常需要一些自动化工具的帮助 ...

  8. angular开发者吐槽react+redux的复杂：“一个demo证明你的开发效率低下”

    曾经看到一篇文章,写的是jquery开发者吐槽angular的复杂.作为一个angular开发者,我来吐槽一下react+redux的复杂. 例子 为了让大家看得舒服,我用最简单的一个demo来展示r ...

  9. opencv 之 icvCreateHidHaarClassifierCascade 分类器信息初始化函数部分详细代码注释。

    请看注释.这个函数,是人脸识别主函数,里面出现过的函数之一,作用是初始化分类器的数据,就是一个xml文件的数据初始化. static CvHidHaarClassifierCascade* icvCr ...

  10. struts2学习笔记--struts.xml配置文件详解

    这一节主要讲解struts2里面的struts.xml的常用标签及作用: 解决乱码问题 <constant name="struts.i18n.encoding" value ...