CSS3 3D Transform,用于 3 維動畫或旋轉。
CSS3 3D 轉換是一個屬性,用于改變元素的實際形式。這個特性可以改變元素的形狀、大小和位置。
主要有下列方法：
* rotateX()
* rotateY()
* rotateZ()
**注意：**Internet Explorer 10 和 Firefox 支持 3D 轉換； Chrome 和 Safari 必須添加前綴 -webkit-； Opera 還不支持 3D 轉換(支持 2D 轉換 )
## rotateX()
rotateX()方法，圍繞其在一個給定度數X軸旋轉的元素。
~~~
.rotate-x {
transform: rotateX(60deg);
-webkit-transform: rotateX(120deg); /* Safari and Chrome */
}
~~~
## rotateY()
rotateY()方法，圍繞其在一個給定度數Y軸旋轉的元素。
~~~
.rotate-y {
transform: rotateY(60deg);
-webkit-transform: rotateY(120deg); /* Safari and Chrome */
}
~~~
## rotateZ()
rotateZ()方法，圍繞其在一個給定度數Z軸旋轉的元素。
~~~
.rotate-z {
transform: rotateZ(60deg);
-webkit-transform: rotateY(120deg); /* Safari and Chrome */
}
~~~
## rotate3d()
otate3d(x,y,z,a)中取值說明：
* x：是一個0到１之間的數值，主要用來描述元素圍繞X軸旋轉的矢量值；
* y：是一個０到１之間的數值，主要用來描述元素圍繞Y軸旋轉的矢量值；
* z：是一個０到１之間的數值，主要用來描述元素圍繞Z軸旋轉的矢量值；
* a：是一個角度值，主要用來指定元素在3D空間旋轉的角度，如果其值為正值，元素順時針旋轉，反之元素逆時針旋轉。 面介紹的三個旋轉函數功能等同：
* rotateX(a)函數功能等同于rotate3d(1,0,0,a)
* rotateY(a)函數功能等同于rotate3d(0,1,0,a)
* rotateZ(a)函數功能等同于rotate3d(0,0,1,a)
例子
~~~
.rotate-3d {
transform: rotate3d(0,0.6,0.2,60deg);
-webkit-transform: rotate3d(0.6,0.6,0.2,60deg); /* Safari and Chrome */
}
~~~
## 轉換方法
| 函數 | 描述 |
|-------|---------|
| 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 轉換元素的透視視圖。 |
## 源碼
本文中所用例子源碼參見?[https://github.com/waylau/css3-tutorial](https://github.com/waylau/css3-tutorial)?中?`samples`?目錄下的 3d_transform.html
## 參考
* [http://www.zhangxinxu.com/wordpress/2012/09/css3-3d-transform-perspective-animate-transition/](http://www.zhangxinxu.com/wordpress/2012/09/css3-3d-transform-perspective-animate-transition/)
* [http://www.w3cplus.com/css3/css3-3d-transform.html](http://www.w3cplus.com/css3/css3-3d-transform.html)
