关于图形变化的模式，css3标准当中transform-style来定义。默认是flat，展现出来的是简单的效果。而preserve-3d则将空间呈现为3d模式。从正常的思维来说，应该只需要preserve-3d就好了，但是从谣传“开启了perserve-3d就使用了GPU加速”来说，这个属性可能是为了降低系统消耗用的，毕竟3d比2d要多一个维度的计算。

如果需要使用3d模式，必须先指定style为3d，并在任意父元素上增加 perspective 及 perspective-origin 来指定透视点。
具体的给设计师改变元素样式用的属性则有以下五个：

translate3d(x,y,z) 是用来控制元素的位置在页面上的三轴的位置的；
rotate(deg)是用来控制元素旋转角度的；
skew[x,y](deg) 这个属性是用来制作倾斜度的，做过设计的人可能会知道，这个是用来在2d里面创建3d透视图的时候必须的属性；
scale3d(x,y,z) 用来放大缩小效果，属性是比值；
matrix3d，css矩阵。通过这个矩阵属性，涵盖了上面所有的属性值，但是个人觉得可读性极差（全都是数字和单位，背起来有点模糊），目前没有理由推荐使用。

例子：div{transform:rotate(7deg);}　

值	　　　　　　　　　　描述
transition-property	规定设置过渡效果的 CSS 属性的名称。（1. none 代表没有动画  2.all 所有属性参与动画   3.单个指定 width  宽度参与动画）
transition-duration	规定完成过渡效果需要多少秒或毫秒。
transition-timing-function	规定速度效果的速度曲线。
transition-delay	定义过渡效果何时开始。

属性                 　　　　　描述                                   　　　　　　　　　　　　 CSS
@keyframes               　　 规定动画。   　　　　　　　　　　　　　　　　　　　　　　　　　　　　  3
animation                　　 所有动画属性的简写属性，除了 animation-play-state 属性。    　　　  3
animation-name    　　　　 　　规定 @keyframes 动画的名称。    　　　　　　　　　　　　　　　　　　  3
animation-duration        　　规定动画完成一个周期所花费的秒或毫秒。默认是 0。    　　　　　　　　　  3
animation-timing-function    规定动画的速度曲线。默认是 "ease"。   　　　　　　　　　　　　　　　　 3
animation-delay    　　　　　　规定动画何时开始。默认是 0。    　　　　　　　　　　　　　　　　　　　　3
animation-iteration-count    规定动画被播放的次数。默认是 1。  　　　　　　　　　　　　　　　　　　  3
animation-direction    　　　 规定动画是否在下一周期逆向地播放。默认是 "normal"。   　　　　　　　　 3
animation-play-state    　　  规定动画是否正在运行或暂停。默认是 "running"。    　　　　　　　　　　3
animation-fill-mode    　　　 规定对象动画时间之外的状态。   　　　　　　　　　　　　　　　　　　　　 3