上一篇：CSS3 2D 轉(zhuǎn)換下一篇：CSS3 過(guò)渡

CSS3 3D 轉(zhuǎn)換

3D 轉(zhuǎn)換

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

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

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

2D rotate

3D rotate

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

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

屬性
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()方法，圍繞其在一個(gè)給定度數(shù)X軸旋轉(zhuǎn)的元素。

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

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

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

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

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

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

上一篇：CSS3 2D 轉(zhuǎn)換下一篇：CSS3 過(guò)渡