Transform-变形
CSS3 2D Transform
translate() //移动rotate() //旋转scale() //缩放skew() //扭曲matrix() //矩阵变形
translate() 移动：将HTML元素在x-y轴平面上做位移，且不会影响到其他元素
translate(x,y)水平方向和垂直方向同时移动（也就是X轴和Y轴同时移动）
translateX(x)仅水平方向移动（X轴移动）
translateY(y)仅垂直方向移动（Y轴移动）
例：
-webkit-transform: translate(20px,20px); /*Webkit内核浏览器：Safari and Chrome*/-moz-transform: translate(20px,20px); /*Mozilla内核浏览器*/-o-transform: translate(20px,20px); /*Opera*/-ms-transform:translate(20px,20px); /*IE9*/transform: translate(20px,20px); /*W3C标准*/
rotate() 旋转
需先有transform-origin属性的定义。transform-origin定义的是旋转的基点
如果设置的值为正数表示顺时针旋转，如果设置的值为负数，则表示逆时针旋转。
如：
transform:rotate(30deg)；
scale() 缩放
scale(x,y)使元素水平方向和垂直方向同时缩放（也就是X轴和Y轴同时缩放）
scaleX(x)元素仅水平方向缩放（X轴缩放）
scaleY(y)元素仅垂直方向缩放（Y轴缩放)
但它们具有相同的缩放中心点和基数，其中心点就是元素的中心位置
缩放基数为1，如果其值大于1元素就放大，反之其值小于1，元素缩小
如：
transform:scale(1.5,1.3)
skew() 扭曲，斜切变换
skew(x,y)使元素在水平和垂直方向同时扭曲（X轴和Y轴同时按一定的角度值进行扭曲变形）
skewX(x)仅使元素在水平方向扭曲变形（X轴扭曲变形）
skewY(y)仅使元素在垂直方向扭曲变形（Y轴扭曲变形）
如：
transform:skewX(30deg)
transform:skewY（10deg）
matrix() 矩阵变形
transform: matrix(a,b,c,d,tx,ty);
本质上scale、skew、rotate、translate的效果都是通过matrix实现的，tx、ty表示位移量，matrix方法更详细的介绍可以参考这里：理解CSS3 transform中的Matrix(矩阵)
改变元素基点transform-origin
transform-origin(X,Y):用来设置元素的运动的基点（参照点）。默认点是元素的中心点。其中X和Y的值可以是百分值,em,px
其中X也可以是字符参数值left,center,right；Y和X一样除了百分值外还可以设置字符值top,center,bottom
支持transform浏览器
IE9以下不支持
CSS3 3D Transform
3D Transform，与2D Transform相比，它给HTML元素在x-y平面加上了z轴；
translate3d(tx,ty,tz)：他定义了一个3D的位移方法，增加了z轴的偏移量translateZ(tz)：这个方法只在Z轴偏移，与translateX()和translateY()相似scale3d(sx,sy,sz)：在原有的scale方法上增加了z轴的参数scaleZ(sz)：同理，只放大z轴，与scaleX()和scaleY()类似rotate3d(rx,ry,rz)：将元素以给定参数的某一个轴方向旋转rotateX(angle)，rotateY(angle)和rotateZ(angle)：只按照某一个轴旋转，rotate3d(1,0,0,30deg)相当于rotateX(30deg)，其他类推。
激活元素的3D空间，需要perspective属性，写法有两种：
transform: perspective( 600px );perspective: 600px;
写法 transform:perspective(600px) 适用于单个元素，会对每一个元素做3D视图的变换
而 perspective:600px 的写法，需写在父元素上，然后以父元素的视角，对多个子元素进行3D变换，多个子元素共享同一个3D空间
perspective的参数值，决定了3D效果的强烈程度，可以想象为距离多远去观察元素。值越大，观察距离就越远，同样的旋转值，看起来效果就弱一些；值越小，距离越近，3D效果就更强烈。
perspective-orgin
同样，对一个元素进行3D变换的时候，变换点都是元素的中心点，如果你想以其他的位置为变换点，那就可以用这个属性来做调整；
transform-style
这个参数用来共享父元素的3D空间；
transform-style有两个值，一个是默认的flat；一个是preserve-3d
backface-visibility
backface-visibility 属性可用于隐藏内容的背面。默认情况下，背面可见，这意味着即使在翻转后，变换的内容仍然可见。但当 backface-visibility 设置为 hidden 时，旋转后内容将隐藏，确保只有正面可见；
CSS3 3D Transform 理解详见：http://www.zhangxinxu.com/wordpress/2012/09/css3-3d-transform-perspective-animate-transition/
参考资料：
http://www.w3cplus.com/content/css3-transform
http://beiyuu.com/css3-animation/
http://www.zhangxinxu.com/wordpress/2012/06/css3-transform-matrix-%E7%9F%A9%E9%98%B5/
http://www.ruanyifeng.com/blog/2014/02/css_transition_and_animation.html
http://www.zhangxinxu.com/wordpress/2012/09/css3-3d-transform-perspective-animate-transition/
