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

FunctionDescription
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
 

参考:http://www.w3schools.com/css3/css3_2dtransforms.asp     transform 2D 资料  里面含demo效果图

http://www.w3schools.com/css3/css3_3dtransforms.asp      transform 3D资料  里面含demo效果图

http://www.w3schools.com/cssref/css3prtransform.asp      综合各种demo效果展示

http://www.daqianduan.com/css3-transform/