matrix()
：以一个含6个值的(a,b,c,d,e,f)变换矩阵的形式制定一个2D变换，相当于直接应用[a,b,c,d,e,f]变换矩阵。
translate()
：指定对象的2D平移。第一个参数对应x轴，第二个参数对应y轴，若第二个参数没有，默认为0。
translateX()
：指定对象X轴（水平方向）的平移。
translateY()
：指定对象Y轴（垂直方向）的平移。
rotate()
：指定对象的2D旋转，需要先定义transform-origin属性。
scale()
：指定对象的2D缩放。第一个参数对应X轴，第二个参数对应Y轴。如果第二个参数未提供，则默认取第一个参数的值。Zoom是改变视图的显示大小，scale是改变图形尺寸的大小！
scalex()
：指定对象X轴的（水平方向）缩放。
scaley()
：指定对象Y轴的（垂直方向）缩放。
skew()
：指定对象的斜切扭曲。第一个参数对应X轴，第二个参数对应Y轴。如果第二个参数未提供，则默认为0。
.
skewx()
：指定对象X轴的（水平方向）扭曲。
.
scaley()
：指定对象Y轴的（垂直方向）扭曲。
3D Transform同理，具体取值如下：
matrix3d()
：以一个4x4矩阵的形式指定一个3D变换。
translate3d()
：指定对象的3D位移。第1个参数对应X轴，第2个参数对应Y轴，第3个参数对应Z轴，参数不允许省略。
translateZ()
：指定对象Z轴的平移。
rotate3d()
：指定对象的3D旋转角度，其中前3个参数分别表示旋转的方向x,y,z，第4个参数表示旋转的角度，参数不允许省略。
rotateX()
：指定对象在x轴上的旋转角度。
rotateY()
：指定对象在y轴上的旋转角度。
rotateZ()
：指定对象在z轴上的旋转角度。
scale3d()
：指定对象的3D缩放。第1个参数对应X轴，第2个参数对应Y轴，第3个参数对应Z轴，参数不允许省略。
scaley()
：指定对象Y轴的（垂直方向）缩放。
.
scalez()
：指定对象的z轴缩放。
.
perspective()
：指定透视距离。
transform几个值的先后问题：先旋转（改变坐标系），再通过translateZ进行定位。
matrix矩阵扩展
transform的
matrix()
是其他变换的基础，可以通过配置参数扩展为其他的变换。写法如下：
transform: matrix(a,b,c,d,e,f);
其对应的矩阵如下：
则初始坐标x,y可以构成一个3*1的矩阵(x,y,1)，两个矩阵相乘，可以算出变换后的坐标x',y',得出一个3*1的矩阵(x',y',1)。如下图所示：
此时，变换后的坐标即为 x'= ax+ cy+ e, y'= bx+ dy +f。
因此，几个矩阵变换的转换如下：
平移：
transform: matrix(1, 0, 0, 1, tx, ty)
==
transform: translate(tx,ty)
缩放：
transform: matrix(sx, 0, 0, sy, 0, 0)
==
transform: scale(sx,sy)
旋转：
transform: matrix(cosθ,sinθ,-sinθ,cosθ,0,0)
==
transform: rotate(θ)
拉伸：
transform: matrix(1,tan(θy),tan(θx),1,0,0)
==
transform: skew(tx,ty)
matrix3d同理，为一个4*4的矩阵定义一个3D变换的序列。
scale和zoom的区别
zoom的缩放是相对于左上角的；scale的缩放是相对于transform-origin的
zoom的缩放改变了元素占据的空间大小，scale缩放占据原始尺寸不变，页面布局不发生变化。
zoom渲染图片比较锐利，scale渲染比较模糊。
对文字的缩放规则不一样。zoom受限于最小12px中文大小限制，scale则是纯粹地图形进行比例控制。
渲染的性能差异比较明显。由于zoom缩放会改变元素的真实大小，因此zoom改变会引起整个页面的重新渲染，scale只是在当前的元素上重绘。
scale和zoom的缩放效果会叠加。
点我查看DEMO
坐标系统 transform-origin
transform旋转默认是绕着中心点进行旋转，也就是
transform-origin
对应的点，若对该属性重新设置的时候，矩阵相关计算的中心店也改变了，例如
-webkit-transform-origin: bottom left;
将坐标中心点移到左下角，
transform-origin: 50px 70px;
将坐标移动到距离左侧50px，顶部70px的地方。此时（30，30）为图中所示的点。
指定观察者与[z=0]平面的距离，产生透视效果。[z>0]时比正常大，[z<0]时比正常小。默认值为none，可以取长度值表示与[z=0]平面的距离，不允许负值。
perspective有两种书写，一种是用在舞台元素上（该动画元素的父辈元素上），另一种是用在当前的动画元素上，与transform其他属性在一起。
舞台元素上：
.stage {
perspective: 600px;
当前动画元素上：
#stage .box {
transform: perspective(600px) rotateY(45deg);
检索或设置对象变换时的过渡。这是一个复合属性，顺序是[ none | <single-transition-property> ] || <time> || <single-transition-timing-function> || <time>
只有一个时间时，为transition-duration的定义，如果有两个的话，第二个为transition-delay的定义。
transition-property
检索或设置对象中的参与过渡的属性。默认值为all，默认为所有可以进行过渡的css属性，none表示不指定过渡的css属性，或者根据属性值单独指定。
transition-duration
检索或设置对象过渡的持续时间。
transition-timing-function
检索或设置对象中过渡的动画类型。默认为ease，有如下几种取值：
linear：线性过渡。等同于贝塞尔曲线(0.0, 0.0, 1.0, 1.0)
ease：平滑过渡。等同于贝塞尔曲线(0.25, 0.1, 0.25, 1.0)。
ease-in：由慢到快。等同于贝塞尔曲线(0.42, 0, 1.0, 1.0)。
ease-out：由快到慢。等同于贝塞尔曲线(0, 0, 0.58, 1.0)。
ease-in-out：由慢到快再到慢。等同于贝塞尔曲线(0.42, 0, 0.58, 1.0)。
steps：接受两个参数的步进函数。第一个参数必须为正整数，指定函数的步数。第二个参数取值可以是start或end，指定每一步的值发生变化的时间点。第二个参数是可选的，默认值为end。
step-start：等同于 steps(1, start)。
step-end：等同于 steps(1, end)。
cubic-bezier：特定的贝塞尔曲线类型，4个数值需在[0, 1]区间内。
检索或设置对象所应用的动画特效。。这是一个复合属性，顺序是<single-animation-name> || <time> || <single-animation-timing-function> || <time> || <single-animation-iteration-count> || <single-animation-direction> || <single-animation-fill-mode> || <single-animation-play-state>
只有一个时间时，为animation-duration的定义，如果有两个的话，第二个为animation-delay的定义。
animation-name
检索或设置对象中的参与过渡的属性。检索或设置对象所应用的动画名称，必须与规则@keyframes配合使用，因为动画名称由@keyframes定义
animation-iteration-count
检索或设置对象动画的循环次数。默认值为1，当取infinite表示是无限循环。
animation-direction
检索或设置对象动画在循环中是否反向运动。默认值为normal，具体取值如下。
normal：正常方向
reverse：反方向运行
alternate：动画先正常运行再反方向运行，并持续交替运行
alternate-reverse：动画先反运行再正方向运行，并持续交替运行
