CSS3 _ CSS 3D变换

CSS 3D变换

CSS还可以使元素进行3D变换。把鼠标放在下面两个元素上，先看看2D变换和3D变换的区别吧。

2D旋转

3D旋转

3D变换的浏览器兼容性

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

属性
transform	36.0 12.0 -webkit-	10.0	16.0 10.0 -moz-	9.0 4.0 -webkit-	23.0 15.0 -webkit-
transform-origin	36.0 12.0 -webkit-	10.0	16.0 10.0 -moz-	9.0 4.0 -webkit-	23.0 15.0 -webkit-
transform-style	36.0 12.0 -webkit-	11.0	16.0 10.0 -moz-	9.0 4.0 -webkit-	23.0 15.0 -webkit-
perspective	36.0 12.0 -webkit-	10.0	16.0 10.0 -moz-	9.0 4.0 -webkit-	23.0 15.0 -webkit-
perspective-origin	36.0 12.0 -webkit-	10.0	16.0 10.0 -moz-	9.0 4.0 -webkit-	23.0 15.0 -webkit-
backface-visibility	36.0 12.0 -webkit-	10.0	16.0 10.0 -moz-	9.0 4.0 -webkit-	23.0 15.0 -webkit-

CSS 3D变换

在此小节，会涉及如下三类方法：

rotateX()方法
rotateY()方法
rotateZ()方法

rotateX() 方法

rotateX()方法可使指定元素沿着x轴按指定方向进行旋转。

#myDiv {
    -webkit-transform: rotateX(150deg); /* Safari */
    transform: rotateX(150deg);
}

运行一下

rotateY() 方法

rotateY()方法可使指定元素沿着y轴按指定方向进行旋转。

#myDiv {
    -webkit-transform: rotateY(130deg); /* Safari */
    transform: rotateY(130deg);
}

运行一下

rotateZ() 方法

rotateZ()方法可使指定元素沿着z轴按指定方向进行旋转。

#myDiv {
    -webkit-transform: rotateZ(90deg); /* Safari */
    transform: rotateZ(90deg);
}

运行一下

CSS 3D变换

推广