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() 方法
rotateX()方法,圍繞其在一個給定度數X軸旋轉的元素。
實例
div
{
transform: rotateX(120deg);
-webkit-transform: rotateX(120deg); /* Safari and Chrome */
}
{
transform: rotateX(120deg);
-webkit-transform: rotateX(120deg); /* Safari and Chrome */
}
嘗試一下»
rotateY() 方法
rotateY()方法,圍繞其在一個給定度數Y軸旋轉的元素。
實例
div
{
transform: rotateY(130deg);
-webkit-transform: rotateY(130deg); /* Safari and Chrome */
}
{
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 轉換元素的透視視圖。 |