Css3 常见样式笔记

本文版权归作者（苦瓜糖水）所有，禁止转载至其他网站，以致污染搜索环境。

transform

· 旋转：rotate(90deg)--参数：旋转角度--(可通过transform-origin : x y指定旋转中心)

· 倾斜：skew(90deg)--参数：倾斜角度--(可单独指定XY轴倾斜：skewX()skewY())

· 缩放：scale(2)--参数：缩放倍数--(可单独指定XY轴缩放：scaleX()、scaleY())

· 位移：translate(30px,50px)--参数：X轴位移,Y轴位移--(可单独指定XY轴位移：translateX()、translateY())

· 矩阵：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)

通过矩阵实现旋转
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