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)
transform-style
11.0
perspective
perspective-origin
backface-visibility
rotateX()方法，圍繞其在一個給定度數X軸旋轉的元素。
div
{
transform: rotateX(120deg);
-webkit-transform: rotateX(120deg); /* Safari 與 Chrome */
}
rotateY()方法，圍繞其在一個給定度數Y軸旋轉的元素。
transform: rotateY(130deg);
-webkit-transform: rotateY(130deg); /* Safari 與 Chrome */
下表列出了所有的轉換屬性：
描述
CSS
向元素應用 2D 或 3D 轉換。
3
允許你改變被轉換元素的位置。
規定被嵌套元素如何在 3D 空間中顯示。
規定 3D 元素的透視效果。
規定 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 轉換元素的透視視圖。