Latest web development tutorials

CSS3 3D 轉換

3D Transforms

CSS3 允許您使用3D 轉換來對元素進行格式化。

在本章中,您將學到其中的一些3D 轉換方法:

  • rotateX()
  • rotateY()

點擊下面的元素,來查看2D 轉換與3D 轉換之間的不同之處:

2D rotate
3D rotate


瀏覽器支持

表格中的數字表示支持該屬性的第一個瀏覽器版本號。

緊跟在-webkit-, -ms- 或-moz- 前的數字為支持該前綴屬性的第一個瀏覽器版本號。

属性
transform 36.0
12.0 -webkit-
10.0 16.0
10.0 -moz-
4.0 -webkit- 23.0
15.0 -webkit-
transform-origin
(three-value syntax)
36.0
12.0 -webkit-
10.0 16.0
10.0 -moz-
4.0 -webkit- 23.0
15.0 -webkit-
transform-style 36.0
12.0 -webkit-
11.0 16.0
10.0 -moz-
4.0 -webkit- 23.0
15.0 -webkit-
perspective 36.0
12.0 -webkit-
10.0 16.0
10.0 -moz-
4.0 -webkit- 23.0
15.0 -webkit-
perspective-origin 36.0
12.0 -webkit-
10.0 16.0
10.0 -moz-
4.0 -webkit- 23.0
15.0 -webkit-
backface-visibility 36.0
12.0 -webkit-
10.0 16.0
10.0 -moz-
4.0 -webkit- 23.0
15.0 -webkit-

rotateX() 方法

Rotate X

rotateX()方法,圍繞其在一個給定度數X軸旋轉的元素。

OperaSafariChromeFirefoxInternet Explorer

實例

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

嘗試一下»


rotateY() 方法

Rotate Y

rotateY()方法,圍繞其在一個給定度數Y軸旋轉的元素。

OperaSafariChromeFirefoxInternet Explorer

實例

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

嘗試一下»


轉換屬性

下表列出了所有的轉換屬性:

屬性 描述 CSS
transform 向元素應用2D 或3D 轉換。 3
transform-origin 允許你改變被轉換元素的位置。 3
transform-style 規定被嵌套元素如何在3D 空間中顯示。 3
perspective 規定3D 元素的透視效果。 3
perspective-origin 規定3D 元素的底部位置。 3
backface-visibility 定義元素在不面對屏幕時是否可見。 3

3D 轉換方法

函數 描述
matrix3d(n,n,n,n,n,n,
n,n,n,n,n,n,n,n,n,n)
定義3D 轉換,使用16 個值的4x4 矩陣。
translate3d(x,y,z) 定義3D 轉化。
translateX(x) 定義3D 轉化,僅使用用於X 軸的值。
translateY(y) 定義3D 轉化,僅使用用於Y 軸的值。
translateZ(z) 定義3D 轉化,僅使用用於Z 軸的值。
scale3d(x,y,z) 定義3D 縮放轉換。
scaleX(x) 定義3D 縮放轉換,通過給定一個X 軸的值。
scaleY(y) 定義3D 縮放轉換,通過給定一個Y 軸的值。
scaleZ(z) 定義3D 縮放轉換,通過給定一個Z 軸的值。
rotate3d(x,y,z,angle) 定義3D 旋轉。
rotateX(angle) 定義沿X 軸的3D 旋轉。
rotateY(angle) 定義沿Y 軸的3D 旋轉。
rotateZ(angle) 定義沿Z 軸的3D 旋轉。
perspective(n) 定義3D 轉換元素的透視視圖。