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/css3_pr_transform.asp 综合各种demo效果展示

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