css3-2d变换

transform:需要加内核前缀：Transform 执行顺序问题 — 后写先执行

-webkit-transform:rotate(0deg) scale(1.2);

-moz-transform:rotate(0deg) scale(1.2);

-o-transform:rotate(0deg) scale(1.2);

transform:rotate(0deg) scale(1.2);

 

介绍四种2d变换：

1.rotate()  旋转函数 取值度数

–deg  度数

–Transform-origin 旋转的基点

-webkit-transform:rotate(0deg);

-moz-transform:rotate(0deg);

-o-transform:rotate(0deg);

transform:rotate(0deg);

2.

scale() 缩放函数 取值 正数、负数和小数

–scaleX()

–scaleY()

写法同上

3.

skew() 倾斜函数 取值度数

–skewX()

–skewY()

4.

translate() 位移函数

–translateX()

translateY()

 

l

以上的变换其实都是通过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);

 

obj.style.WebkitTransform="matrix("+a+","+b+","+c+","+d+",0,0)";
obj.style.MozTransform="matrix("+a+","+b+","+c+","+d+",0,0)";
obj.style.transform="matrix("+a+","+b+","+c+","+d+",0,0)";
obj.style.filter="progid:DXImageTransform.Microsoft.Matrix( M11="+a+", M12= "+c+", M21= "+b+" , M22="+d+",SizingMethod='auto expand')";