关键帧 例如：
调用关键帧：
语法 animation:animation-name animation-duration animation-timing-function animation-delay animation-iteration-count animation-direction
animation-name 由 @keyframes 创建的动画名称
animation-duration过渡时间
animation-timing-function过渡方式
animation-delay延迟时间
animation-iteration-count 动画的播放次数 通常值为1次 特殊值infinite为无限播放
animation-direction动画的播放方向，alternate为偶数次向前播放，normal动画每次都是循环向前播放
练习如下：
该图形的变化从左上角到右上角来回跳动的一个过程
linear 规定以相同速度开始至结束的过渡效果
ease 规定慢速开始，然后变快，然后慢速结束的过渡效果（默认值）
ease-in 规定以慢速开始的过渡效果
ease-out 规定以慢速结束的过渡效果
ease-in-out 规定以慢速开始和结束的过渡效果
perspective:500px透视 也可以理解为视距，可以理解为 你的眼睛距离物体的距离 距离物体越近 物体就越大，距离物体越远 物体就越小
transform: rotateZ(30deg) rotateZ是绕着z轴旋转 正值是顺时针旋转 负值是逆时针旋转
transform: rotateY(30deg) rotateY是绕着y轴旋转 正值是向里面旋转 负值是向外面旋转
transform: rotateX(30deg)rotateX是绕着x轴旋转 正值是向里面旋转 负值是向外面旋转
transform: rotate(30deg)参数a取正值时元素相对原来中心顺时针旋转
transform: translate3d(0, 0, 200px)效果如下:
translate3d(0,0,200px) 表示z轴向前移动二楼200px（近大远小的原理）
translate3d 里面分别表示x轴距离 y轴距离 和z轴距离
要想实现3d效果必须要在父元素上加上一个属性perspective
如果想让子元素有3d的效果 必须要给父元素设置transform-style，默认值是flat， 想变成3d效果要把值设置成preserve-3d
也可以 设置旋转后的div的上下位置，在.b:hover里面加上transform-origin：top/bottom/left/right
perspective是设置3d效果的景深，通俗来说就是设置你的眼睛与这个3d元素的距离。而生活经验告诉我们，你从远处和近处分别观察同一个物体（比如正方形）时，其3d效果肯定是不同的。还有一个属性是perspective-origin，则是用来设置3d效果的视角的，说白了就是你观察3d元素的角度，正常情况下物体是放在你眼睛的正前方，你眼睛只需平视即可，如果把物体向上下左右不同方向移动，在你的头部不能移动的前提下，你的眼睛要想看到物体就需要随着物体的移动而转动，这就是视角。而在不同的视角下，物体的3d效果肯定也会不同（比如物体移动到你眼睛的上方，你能看到物体的底面，而当它移动到你眼睛的下方时，你看不到底面了，只能看到顶面）。
perspective与最终呈现在浏览器上的大小，关系运算；这个公式我在网上没找到 ，用几组数据得出来的结果 ，也测试了几组数据好像也没什么问题，可以用一下；设置了perspective就等于启动了物体的Z轴，Z轴默认为0px
W=物体宽度；
z=translateZ；
p=perspective；
d=最终浏览器渲染的大小；
(w*z) / (p-z) + w=d；
也可以根据一个目标大小推出自己想要的perspective或者translateZ；
(w*z) /( d-w)+z=p
p-(w*z) /( d-w)=z
先了解几点
1.--3D物体的轴，做一个平时看手机的姿势
1.1--你把手机左右移动（头不要动）这就是物体的X轴运动；
1.2--你把手机上下移动（头不要动）这就是物体的Y轴运动；
1.3--你把手机前后移动（头不要动）这就是物体的Z轴运动；（前后移动就是把手机放远点和拉近点，胳膊伸直和弯曲的动作）
2.--perspective定义观察点到被观察物体Z轴的距离（眼睛到手机的前屏与手机背面的中心点距离）；
3.--分清perspective和物体Z轴运动
3.1--如果你的手机不动 ，头前后移动就是perspective在改变；
3.2--如果你的头不动 ，手机前后移动就是Z轴在改变；
4.--如何设置perspective，
perspective设置会改变物体最终呈现在浏览器上的大小和形状；perspective的数值要比translateZ大，否则就看不到物体了，因为他跑到你的眼睛后面去了。
一般弄懂了perspective和translateZ之间的关系后，其他的变形心里就有底了，
比如物体rotateY的时候，我们看到的样子变成另一个样子的过程，脑子就有概念了
5.--例子
<div class="a">
<div class="b">
</div>
</div>
.a{
width:100px
height:200px
margin:300px auto
perspective:60px
}
.b{
width:100%
height:100%
background:#ccc
transform: translateZ(30px)
}
套用上面公式(w*z) / (p-z) + w=d；
(100*30)/(60-30)+100=200
(200*30)/(60-30)+200=400
虽然你设置的宽高为100px*200px，但是你最终看见的大小为200px*400px
最后 可以百度jQuery之家，进入网站搜索perspective，查看2015年-2-2号写的系列文章 （CSS 3D transforms系列教程-perspective）
