css3 Transform

什么是Transform？

****用Transforms我们可以实现移动，缩放，翻转，旋转，和拉伸。

在IE9中添加前缀 -ms-;

火狐中添加前缀 -moz-;

chrome和safari中添加前缀 -webkit;

opera 中添加前缀 -o- ;

*Transform 2D有以下属性： *

translate() 移动，translate(100px,50px) 第一个是x轴，第二个是y轴，如果向右或者向下移动加“-”；

-rotate() 旋转，rotate(30deg)表示顺时针旋转30度，其中“deg”是“度”；

-scale() 缩放，例如：“1.5”表示放大1.5倍，如果放大2倍，即写成“2.0”，缩小则加上“-”。 scale（2,-4）第一个是x轴，第二个是y轴,表示宽度放大2倍，高度缩小4倍；

-skew() 倾斜。skew(40deg，50deg)第一个是x轴，第二个是y轴,表示向右倾斜40度，向上倾斜50度；

-matrix() 做了6个参数，可以实现rotate,scale,move(translate),skew；

div
{
transform:matrix(0.866,0.5,-0.5,0.866,0,0);
-ms-transform:matrix(0.866,0.5,-0.5,0.866,0,0); /* IE 9 /
-moz-transform:matrix(0.866,0.5,-0.5,0.866,0,0); / Firefox /
-webkit-transform:matrix(0.866,0.5,-0.5,0.866,0,0); / Safari and Chrome /
-o-transform:matrix(0.866,0.5,-0.5,0.866,0,0); / Opera */
}

*Transform 3D有以下属性： *

**** -rotatex()

-rotatey()

里面的参数单位都是deg；

3D Transform Methods

Function	Description
matrix3d (n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n)	Defines a 3D transformation, using a 4×4 matrix of 16 values
translate3d(x,y,z)	Defines a 3D translation
translateX(x)	Defines a 3D translation, using only the value for the X-axis
translateY(y)	Defines a 3D translation, using only the value for the Y-axis
translateZ(z)	Defines a 3D translation, using only the value for the Z-axis
scale3d(x,y,z)	Defines a 3D scale transformation
scaleX(x)	Defines a 3D scale transformation by giving a value for the X-axis
scaleY(y)	Defines a 3D scale transformation by giving a value for the Y-axis
scaleZ(z)	Defines a 3D scale transformation by giving a value for the Z-axis
rotate3d(x,y,z,angle)	Defines a 3D rotation
rotateX(angle)	Defines a 3D rotation along the X-axis
rotateY(angle)	Defines a 3D rotation along the Y-axis
rotateZ(angle)	Defines a 3D rotation along the Z-axis
perspective(n)	Defines a perspective view for a 3D transformed element