淺理解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/