# CSS3 3D 轉換 ## 3D 轉換 CSS3 允許您使用 3D 轉換來對元素進行格式化。 在本章中，您將學到其中的一些 3D 轉換方法： * rotateX() * rotateY() 點擊下面的元素，來查看 2D 轉換與 3D 轉換之間的不同之處： 2D 旋轉 3D 旋轉 ## 它如何工作？ 轉換是使元素改變形狀、尺寸和位置的一種效果。 您可以使用 2D 或 3D 轉換來轉換您的元素。 ## 瀏覽器支持 | 屬性 | 瀏覽器支持 | | --- | --- | | transform | Internet Explorer 10 和 Firefox 支持 3D 轉換。 Chrome 和 Safari 需要前綴 -webkit-。 Opera 仍然不支持 3D 轉換（它只支持 [2D 轉換](/css3/css3_2dtransform.asp "CSS3 2D 轉換")）。 ## rotateX() 方法 通過 rotateX() 方法，元素圍繞其 X 軸以給定的度數進行旋轉。 ### 實例 ``` div { transform: rotateX(120deg); -webkit-transform: rotateX(120deg); /* Safari 和 Chrome */ -moz-transform: rotateX(120deg); /* Firefox */ } ``` ## rotateY() 旋轉 通過 rotateY() 方法，元素圍繞其 Y 軸以給定的度數進行旋轉。 ### 實例 ``` div { transform: rotateY(130deg); -webkit-transform: rotateY(130deg); /* Safari 和 Chrome */ -moz-transform: rotateY(130deg); /* Firefox */ } ``` ## 轉換屬性 下面的表格列出了所有的轉換屬性： | 屬性 | 描述 | CSS | | --- | --- | --- | | [transform](/cssref/pr_transform.asp "CSS3 transform 屬性") | 向元素應用 2D 或 3D 轉換。 | 3 | | [transform-origin](/cssref/pr_transform-origin.asp "CSS3 transform-origin 屬性") | 允許你改變被轉換元素的位置。 | 3 | | [transform-style](/cssref/pr_transform-style.asp "CSS3 transform-style 屬性") | 規定被嵌套元素如何在 3D 空間中顯示。 | 3 | | [perspective](/cssref/pr_perspective.asp "CSS3 perspective 屬性") | 規定 3D 元素的透視效果。 | 3 | | [perspective-origin](/cssref/pr_perspective-origin.asp "CSS3 perspective-origin 屬性") | 規定 3D 元素的底部位置。 | 3 | | [backface-visibility](/cssref/pr_backface-visibility.asp "CSS3 backface-visibility 屬性") | 定義元素在不面對屏幕時是否可見。 | 3 | ## 2D Transform 方法 | 函數 | 描述 | | --- | --- | | 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 轉換元素的透視視圖。 |