CSS3 _ CSS 2D变换

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变换

推广