CSS3转换效果transform

通过 CSS3转换,我们能够对元素进行移动、缩放、转动、拉长或拉伸。转换分为2D转换和3D转换。

2D transform 的属性包含rotate() | scale() | skew() | translate() |matrix();

实例

div
{
transform: rotate(30deg)  translate(50px,100px);
-ms-transform: rotate(30deg) translate(50px,100px);		/* IE 9 */
-webkit-transform: rotate(30deg) translate(50px,100px);	/* Safari and Chrome */
-o-transform: rotate(30deg) translate(50px,100px);		/* Opera */
-moz-transform: rotate(30deg) translate(50px,100px);		/* Firefox */
}

1.translate() 方法

位移,translate(x,y),向右向下移动x,y位置,负数表示相反方向。可以是px也可以是%。例如:translate(50px,100px) ,只有一个值时,y默认是0.

另外x,y可单独移动:translateX(n),translateY(n)

2.rotate() 方法

元素顺时针旋转给定的角度。允许负值,元素将逆时针旋转,单位deg。例如:rotate(30deg)

3.scale() 方法

缩放,scale(x,y),元素会增加或减小。例如:scale(2.0,4.0),只有一个值时,表示xy按照相同比例缩放,scale(1.5)。

X,Y 单独缩放:scaleX(n),scaleY(n)

4.skew() 方法

翻转、倾斜、扭曲之意。skew(X,Y),单位deg,例如:skew(30deg,20deg) 围绕 X 轴把元素翻转 30 度,围绕 Y 轴翻转 20 度

X,Y 单独翻转: skewX(angle),skewY(angle)

5.matrix() 方法

将上面四种方式混合起来,matrix() 方法需要六个参数,包含数学函数,允许您:旋转、缩放、移动以及倾斜元素。

6.transform-origin ()方法

允许你改变被转换元素的位置。

2D 转换元素能够改变元素 x 和 y 轴。3D 转换元素还能改变其 Z 轴。

语法:transform-origin: x-axis y-axis z-axis;

其中:x-axis 定义视图被置于 X 轴的何处。可能的值:left,center,right,length,%;

y-axis 定义视图被置于 Y 轴的何处。可能的值:top,center,bottom,length,%;

z-axis 定义视图被置于 Z 轴的何处。可能的值:length

例如:transform-origin:20% 40%;

讲完了2D transform ,下面讲一个3D transform.

3D transforms使用和2D transforms相同的transform属性,如果你熟悉2D transforms,你会发现3D transforms 属性和它非常相像。

rotateX( angle )
rotateY( angle )
rotateZ( angle )
translateZ( tz )
scaleZ( sz )

说明:

1.translateX()会在水平方向X轴上定位元素,而translateZ()则是在Z轴方向上定位元素,当产生动画时会在3D空间中由前向后运动。如果其值设置为正数,元素会向观察者移动,如果设置为负数,元素则会远离观察者。

2.rotate属性会将元素绕相应的轴旋转,
rotateX() 方法,元素围绕其 X 轴以给定的度数进行旋转。rotateY() 方法,元素围绕其 Y 轴以给定的度数进行旋转。rotateZ() 方法,元素围绕其 Z 轴以给定的度数进行旋转。

还有一些transform 属性的简写方法,它们都需要3个维度的值:
translate3d( tx, ty, tz )
scale3d( sx, sy, sz )
rotate3d( rx, ry, rz, angle )