浅理解CSS3 transform中的Matrix(矩阵)

具体关于transform属性具体内容可以点击这里补个课。稍微熟悉的人都知道，transform中有这么几个属性方法：

.trans_skew { transform: skew(35deg); }
.trans_scale { transform: scale(1, 0.5); }
.trans_rotate { transform: rotate(45deg); }  旋转45°;
.trans_translate { transform: translate(10px, 20px); }  水平偏移10px，垂直偏移20px;

2、transform-origin: left top;元素旋转位移变形的起始点

3、matrix(a,b,c,d,e,f)

　  matrix(1,0,0,1.5,40,50)

      1: 水平缩放比例。默认1

      0：缩放

　   0：缩放

      1.5：垂直方向缩放比例

　   40：水平方向位移

      50：垂直方向位移

4、旋转(rotate)

　　transform:rotate(30deg);  旋转30°

     matrix(cosθ,sinθ,-sinθ,cosθ,0,0)，比较麻烦，旋转建议使用rotate

5、拉伸(skew)

     matrix(1,tan(θy),tan(θx),1,0,0)
　

　 1、skew（0，30deg）；是按照水平方向Y轴，顺时针旋转

　　 2、skew（30deg，0）；是按照垂直方向X轴，逆时针旋转

  

 

总结：

translate、scale、rotate、skew 简单的元素位移建议使用前面单独属性

matrix（）适合复杂的交互应用，例如：“镜像对称效果”

简单理解，参考：   
http://www.zhangxinxu.com/wordpress/2012/06/css3-transform-matrix-%E7%9F%A9%E9%98%B5/