标准浏览器:matrix(1,0,0,1,0,0)
matrix(a,b,c,d,e,f)
IE8,7,6: progid:DXImageTransform.Microsoft.Matrix(
M11=1, M12=0,M21=0,M22=1,SizingMethod='auto expand');
M11 == a
M12 == c
M21 == b
M22 == d
矩阵实现位移(disX和disY为偏移距离)
x位移: e = e + disX
y位移:f = f + disY
矩阵实现缩放(x和y为缩放倍数)
x轴缩放: a = x*a; c=x*c; e=x*e
y轴缩放: b = y*b; d=y*d; f=y*f
矩阵实现倾斜(xDeg和yDeg为扭曲角度)
c = Math.tan(xDeg/180*Math.PI)
b = Math.tan(yDeg/180*Math.PI)
矩阵实现旋转(deg是旋转角度)
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);
CSS3 2D transform (Hao Ju Zheng)
2D transform
通过 CSS3 2D转换, 我们能够对元素进行移动、缩放、转动、拉长或拉伸。
浏览器支持 IE9,IE10,Chrome,FireFox
学习资料 W3Cschool Transform教程 Example1 Example2
Transform 常用变换函数
如何兼容IE8,7,6 http://www.useragentman.com/IETransformsTranslator/
扩展知识 2D矩阵变换原理
矩阵函数的使用Example
CSS3 2D Transform PPT
BlueMix Case Study (Hao Zhang)