CSS3：2D转换方法

利用transform 可以实现旋转、缩放、倾斜、移动

属性有：translate、scale

移动：

translateX(10px); //水平方向移动10px

translateY(50px); //垂直方向移动50px

translate(10px);    //水平方向移动10px

translate(10px,50px);   ///水平方向移动10px，垂直方向移动50px

缩放：

scaleX(2);    //宽增大为原来的两倍

scaleY(2);    //高增大为原来的两倍

scale(2);   //增大为原来的2倍

scale(1,2);    //宽不变，高增大为原来的2倍

旋转：

rotate(30deg);    //旋转30度

倾斜：

skewX(30deg);    //沿着X轴倾斜30度

skewY(30deg);   //沿着Y轴倾斜30度

skew(10deg,20deg);     //沿X轴倾斜10度，沿Y轴倾斜20度

当然，要兼容的话就要写全前缀了：如

transform:rotate(7deg);
-ms-transform:rotate(7deg);     /* IE 9 */
-moz-transform:rotate(7deg);     /* Firefox */
-webkit-transform:rotate(7deg); /* Safari 和 Chrome */
-o-transform:rotate(7deg);     /* Opera */

matrix：比较复杂，涉及到矩阵的运算，对应的矩阵是

  （省略1w+字..）

只需要给abcdef附上相应的值就可以了

translate(tx,ty)可以由matrix(1,0,0,1,tx,ty)转换而来

scale(sx,sy)可以由matrix(sx,0,0,sy,0,0) 转换而来

rotate(θ)可以由matrix(cosθ,sinθ,-sinθ,cosθ,0,0) 转换而来

skew(θx，θy)可以由matrix(1,tan(θy),tan(θx),1,0,0) 转换而来

更多看此文章：http://www.zhangxinxu.com/wordpress/2012/06/css3-transform-matrix-%E7%9F%A9%E9%98%B5/

演示：http://peterned.home.xs4all.nl/matrices/