CSS3 3D 轉(zhuǎn)換

3D 轉(zhuǎn)換

CSS3 允許您使用 3D 轉(zhuǎn)換來(lái)對(duì)元素進(jìn)行格式化。

在本章中，您將學(xué)到其中的一些 3D 轉(zhuǎn)換方法：

• rotateX()

• rotateY()

點(diǎn)擊下面的元素，來(lái)查看 2D 轉(zhuǎn)換與 3D 轉(zhuǎn)換之間的不同之處：

瀏覽器支持

表格中的數(shù)字表示支持該屬性的第一個(gè)瀏覽器版本號(hào)。

緊跟在 -webkit-, -ms- 或 -moz- 前的數(shù)字為支持該前綴屬性的第一個(gè)瀏覽器版本號(hào)。

rotateX() 方法

rotateX()方法，圍繞其在一個(gè)給定度數(shù)X軸旋轉(zhuǎn)的元素。

實(shí)例

div
{
transform: rotateX(120deg);
-webkit-transform: rotateX(120deg); /* Safari and Chrome */
}

嘗試一下 ?

rotateY() 方法

rotateY()方法，圍繞其在一個(gè)給定度數(shù)Y軸旋轉(zhuǎn)的元素。

實(shí)例

div
{
transform: rotateY(130deg);
-webkit-transform: rotateY(130deg); /* Safari and Chrome */
}

嘗試一下 ?

轉(zhuǎn)換屬性

下表列出了所有的轉(zhuǎn)換屬性：

3D 轉(zhuǎn)換方法