CSS 变换（Transform）和动画（Animation）

Transform

咱们在写网页的时候是否是大多数时候在操纵二维空间,可是在position绝对定位的时候，咱们遇到了z轴，是否是能够理解为开辟了一个新的空间维度呢，但这也只是简单的层叠，css里有更强大的属性：Transform。

从字面上就能看出，Transform 是 "变型 的意思，他的值主要包括

• 旋转rotate

• 扭曲skew

• 缩放scale

• 移动translate

• 矩阵变形matrix

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

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

从几何学上来讲，面旋转为体，这虽然尚未说到3D，可是已经隐约有了3d的概念了。而后就要说到一个很重要的属性，perspective。

perspective 属性

依然看字面意思，这个属性是透视的意思。咱们都知道近大远小的道理，包括上面咱们的这张旋转动画，若是没有了perspective属性，那么你看到的就再也不是一个矩形的旋转，而是一个矩形逐渐变窄，而后逐渐变宽，由于他没有透视。

perspective后面的值是一个数字，他有两种实现方法

• 使用transform属性，perspective做为函数值:

  transform: perspective(800);

• 或者直接使用 perspective 属性:

  perspective: 800;

perspective能够写在画布（父元素）上，也能够直接写在元素自己上，对于一张画布只有一个变型体的时候，几乎没有差异。可是当一个画布上 有多个变型体的时候，两种写法的差异当即就表现出来了。就像这张图，黄色的部分，perspective直接写在色块上，紫色的部 分，perspective写在了父容器上，以画布做为透视元素，因此子元素的形态都是不同的。

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

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

前面rotateZ已经让咱们找到了Z轴，translateZ就能够用来处理Z轴的坐标。让元素在本身的眼前或近或远。他的值是要参考父元素的perspective值。

好比父元素的perspective值是800，那么子元素translateZ的值越小，就表示子元素离咱们越远，看起来也就越小。当子元素的 translateZ接近800可是小于800的时候，好比790+，那么这个元素会撑满整个屏幕（注意，会超出浏览器），由于这个时候表示这个元素已经 到了你眼前，眼前就是一片小树叶也是能够遮挡住后面全部东西的。当子元素超过了800，就表示这个元素已经到了咱们眼睛后面，咱们是看不见本身后脑勺之后 的东西的，元素就会消失不见。

ps:咱们上面那三个平面旋转的图，你们能看到在Y或者Y轴的旋转到90度的时候，图形消失了，这是由于90度的时候平面与咱们的视线平行，面是没有厚度的，因此也会消失不见。当夹角变大以后又会从新出现，这个被成为视觉盲区。

perspective-origin 属性

简单的了解了透视以后，再来看一个属性 perspective-origin ，透视原点。

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

transform-style 属性

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

你们能够简单的理解为这是开启3D空间的方法：

transform-style: preserve-3d；

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

3D世界里还有一个原理就是，你没法穿过一个物体看到他后面的物体，除非这个物体是透明的，这里咱们就用到一个属性，backface-visibility，当他的值为hidden的时候，就是正常的3D世界。

Animation

如今简单的几何原理都有了，咱们可让平面变3D的过程动态的演示出来了，就是css3的 Animation。
在了解Animation以前，咱们必须了解另外一个特殊的东西，Keyframes。

这里是图形图像里的一个基础概念就是关键帧，每个关键帧表明动画的一个过程节点，Keyframes具备其本身的语法规则，他的命名是 由”@keyframes”开头，后面紧接着是这个“动画的名称”加上一对花括号“{}”，括号中就是一些不一样时间段样式规则，有点像咱们css的样式写 法同样。例如：

@-moz-keyframes name{
     0% {
       -moz-transform:rotateY(0deg) rotateX(0deg) rotateZ(0deg) translateZ(0px);
     }
     25% {
       -moz-transform:rotateY(90deg) rotateX(0deg) rotateZ(0deg) translateZ(0px);
     }
     50% {
       -moz-transform:rotateY(180deg) rotateX(0deg) rotateZ(0deg) translateZ(0px);
     }
     75% {
       -moz-transform:rotateY(90deg) rotateX(0deg) rotateZ(0deg) translateZ(0px);
     }
     100% {
       -moz-transform:rotateY(0eg) rotateX(0deg) rotateZ(0deg) translateZ(0px);
     }
  }

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

而后咱们再看一下Animation的几个经常使用属性：

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

Animation的简化版本transition

搜集资的时候发现还有一个transition过分属性，听说他能够称为animation的简化版本。由于animation属性比transition属性多包含keyframes规则显式控制当前帧的属性，于是更加灵活。
例如：

.contain{
width: 392px; 
position: relative; 
bottom: -20px; 
opacity: 0;}
.contain.on{ 
bottom: 0; 
opacity: 1;
-webkit-transform:translate(-100px,100px);
 transition:opacity 500ms ease-out 2s,transform 1500ms ease-in-out; 
 -webkit-animation:opacity 500ms ease-out 2s,transform 1500ms ease-in-out;
-moz-animation:opacity 500ms ease-out 2s,transform 1500ms ease-in-out;
-ms-animation:opacity 500ms ease-out 2s,transform 1500ms ease-in-out;
-o-animation:opacity 500ms ease-out 2s,transform 1500ms ease-in-out;  }

当符合某种条件时为contain添加.on类，便可有当即x移动-100px,y移动100px,历时1500ms;
延时2s 历时500ms的“由下往上 由透明变为实体”的动画效果。
注意针对性写，而不是写all ease-in 500ms;性能过低

语法：
transition: property duration timing-function delay;

可是须要注意的是：火狐浏览器对于transition最后一个数值要求很严格，若是延时为0时咱们每每会忽略后面的S，则火狐上无效果！

transition 遇到的特殊问题：.aa完成设定动做以后会恢复原样，换作 animation 设置forwards属性依旧会恢复原样。
解决方案：将.aa{display:inline-block;}或者设置为display: block;