css变换transform和动画animation

Transform

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

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

• 旋转rotate

• 扭曲skew

• 缩放scale

• 移动translate

• 矩阵变形matrix

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

perspective属性

依然看字面意思，这个属性是透视的意思。我们都知道近大远小的道理，包括上面我们的这张旋转动画，如果没有了perspective属性，那么你看到的就不再是一个矩形的旋转，而是一个矩形逐渐变窄，然后逐渐变宽，因为他没有透视。perspective后面的值是一个数字，他有两种实现方法，

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

transform: perspective(800);

• 或者直接使用 perspective 属性:

perspective: 800;

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

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

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

perspective-origin属性

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

transform-style属性

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;