什么是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 |
参考: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效果展示