肉渣教程

CSS 2D变换

上一节 下一节

CSS 变换

CSS变换包括对元素的移动、旋转、放大缩小、倾斜等。因此,整体来说,变换就是能让元素形状、尺寸、位置发生改变的特效。

如下所示,CSS变换分为2D变换3D变换两大类。

2D旋转
3D旋转

2D变换的浏览器兼容性

下表是每种浏览器支持相应属性的最低版本,其中-ms-、-webkit-、-moz-、-o-这些前缀,指每种浏览器支持2D变换属性的最低版本浏览器中,需要加上这些前缀,比如在3.5版本的Firefox浏览器中如果要想用transform属性,则需要写成-moz-transform属性;剩下的以此类推。

属性
transform 36.0
4.0 -webkit-
10.0
9.0 -ms-
16.0
3.5 -moz-
9.0
3.2 -webkit-
23.0
15.0 -webkit-
12.1
10.5 -o-
transform-origin 36.0
4.0 -webkit-
10.0
9.0 -ms-
16.0
3.5 -moz-
9.0
3.2 -webkit-
23.0
15.0 -webkit-
12.1
10.5 -o-

CSS 2D变换

本节中会运用到如如下相关2D变换属性:

  • translate()
  • rotate()
  • scale()
  • skewX()
  • skewY()
  • matrix()

下一节会介绍3D变换相关的属性。


translate() 方法

如下所示,translate()方法可以将指定元素平移到指定坐标位置。(以元素左上角为圆点,从左到右为x轴,从上往下为y轴,下例中,div元素被translate方法向右移动50px,向下移动100px )

div {
    -ms-transform: translate(50px, 100px); /* IE 9 */
    -webkit-transform: translate(50px, 100px); /* Safari */
    transform: translate(50px, 100px);
}

运行一下

rotate() 方法

如下所示,rotate()方法可以将指定元素以指定角度进行旋转。


案例1 顺时针旋转20度

div {
    -ms-transform: rotate(20deg); /* IE 9 */
    -webkit-transform: rotate(20deg); /* Safari */
    transform: rotate(20deg);
}

运行一下


案例2 逆时针旋转20度

div {
    -ms-transform: rotate(-20deg); /* IE 9 */
    -webkit-transform: rotate(-20deg); /* Safari */
    transform: rotate(-20deg);
}

运行一下

scale() 方法

scale()方法可以放大或缩小指定元素的尺寸。(根据针对宽度和高度的比例)


案例1:指定元素的宽度扩大成原来的2倍,高度扩大成原来的3倍。

div {
    -ms-transform: scale(2, 3); /* IE 9 */
    -webkit-transform: scale(2, 3); /* Safari */
    transform: scale(2, 3);
}

运行一下


案例2:指定元素的宽度缩小成原来的一半,高度缩小成原来的一半。

div {
    -ms-transform: scale(0.5, 0.5); /* IE 9 */
    -webkit-transform: scale(0.5, 0.5); /* Safari */
    transform: scale(0.5, 0.5);
}

运行一下

skewX() 方法

skewX()方法可让元素沿着x轴方向倾斜指定角度。具体如何,请看示例:

div {
    -ms-transform: skewX(20deg); /* IE 9 */
    -webkit-transform: skewX(20deg); /* Safari */
    transform: skewX(20deg);
}

运行一下

skewY() 方法

skewY()方法可让元素沿着y轴方向倾斜指定角度。具体如何,请看示例:

div {
    -ms-transform: skewY(20deg); /* IE 9 */
    -webkit-transform: skewY(20deg); /* Safari */
    transform: skewY(20deg);
}

运行一下

skew() 方法

skew()方法可以让元素同时实现skewX()skewY()方法,因为skew()方法一次性吃两个变量,分别代表沿着x轴和y轴倾斜的角度。

div {
    -ms-transform: skew(20deg, 10deg); /* IE 9 */
    -webkit-transform: skew(20deg, 10deg); /* Safari */
    transform: skew(20deg, 10deg);
}

运行一下


如果第二个参数缺省,则等价于第二参数为0,即skew(x)等价于skewX(x)方法。


matrix() 方法

洒家就是爱通吃,因此洒家要告诉大家一个可以通吃上述全部功能的方法,叫matrix()方法,它有6个参数,如下所示:

matrix( scaleX(), skewY(), skewX(), scaleY(), translateX(),translateY() )


案例如下:

div {
    -ms-transform: matrix(1, -0.3, 0, 1, 0, 0); /* IE 9 */
    -webkit-transform: matrix(1, -0.3, 0, 1, 0, 0); /* Safari */
    transform: matrix(1, -0.3, 0, 1, 0, 0);
}

运行一下


CSS 2D变换

上一节 下一节