css3 transform matrix矩陣的使用

 

Transform 執行順序問題 — 後寫先執行

matrix(a,b,c,d,e,f) 矩陣函數

•經過矩陣實現縮放

x軸縮放 a=x*a    c=x*c     e=x*e;

y軸縮放 b=y*b   d=y*d     f=y*f;

 

•經過矩陣實現位移

x軸位移: e=e+x

y軸位移: f=f+y

 

•經過矩陣實現傾斜

x軸傾斜: c=Math.tan(xDeg/180*Math.PI)

y軸傾斜: b=Math.tan(yDeg/180*Math.PI)

 

matrix(a,b,c,d,e,f) 矩陣函數

•經過矩陣實現旋轉

a=Math.cos(deg/180*Math.PI);

b=Math.sin(deg/180*Math.PI);

c=-Math.sin(deg/180*Math.PI);

d=Math.cos(deg/180*Math.PI);

 

變換兼容IE9如下IE版本只能經過矩陣來實現

filter: progid:DXImageTransform.Microsoft.Matrix( M11= 1, M12= 0, M21= 0 , M22=1,SizingMethod='auto expand');

IE下的矩陣沒有E和F兩個參數 M11==a; M12==c; M21==b; M22==d