CSS 3D 轉換

CSS 3D 轉換

CSS 還支持 3D 轉換。

請將鼠標懸停在下面的元素上，即可查看 2D 和 3D 轉換之間的區別：

2D rotate
3D rotate

在本章中，您將學習如下 CSS 屬性：

  • transform

瀏覽器支持

表格中的數字注明了完全支持該屬性的首個瀏覽器版本。

屬性 Chrome IE Firefox Safari Opera
transform 36.0 10.0 16.0 9.0 23.0

CSS 3D 轉換方法

通過 CSS transform 屬性，您可以使用以下 3D 轉換方法：

  • rotateX()
  • rotateY()
  • rotateZ()

rotateX() 方法

Rotate X

rotateX() 方法使元素繞其 X 軸旋轉給定角度：

實例

#myDiv {
  transform: rotateX(150deg);
}

親自試一試

rotateY() 方法

Rotate Y

rotateY() 方法使元素繞其 Y 軸旋轉給定角度：

實例

#myDiv {
  transform: rotateY(130deg);
}

親自試一試

rotateZ() 方法

rotateZ() 方法使元素繞其 Z 軸旋轉給定角度：

實例

#myDiv {
  transform: rotateZ(90deg);
}

親自試一試

CSS 轉換屬性

下表列出了所有 3D 變換屬性：

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

CSS 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 轉換元素的透視視圖。