3D · CSS3 Tutorial 《CSS3 教程》

# 3D 轉換 CSS3 3D Transform,用于 3 維動畫或旋轉。 CSS3 3D 轉換是一個屬性,用于改變元素的實際形式。這個特性可以改變元素的形狀、大小和位置。主要有下列方法： - rotateX() - rotateY() - rotateZ() **注意：**Internet Explorer 10 和 Firefox 支持 3D 轉換；Chrome 和 Safari 必須添加前綴 -webkit-；Opera 還不支持 3D 轉換(支持 2D 轉換 ) ![](https://box.kancloud.cn/2015-12-21_567778fc09b7d.jpg) ### 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 */ } ~~~ ### 轉換方法 <table class="reference"><tbody class="calibre17"><tr class="calibre18"><th class="calibre25">函數</th> <th class="calibre20">描述</th> </tr><tr class="calibre22"><td class="calibre23">matrix3d(n,n,n,n,n,n, n,n,n,n,n,n,n,n,n,n)</td> <td class="calibre23">定義 3D 轉換，使用 16 個值的 4x4 矩陣。</td> </tr><tr class="calibre18"><td class="calibre23">translate3d(x,y,z)</td> <td class="calibre23">定義 3D 轉化。</td> </tr><tr class="calibre22"><td class="calibre23">translateX(x)</td> <td class="calibre23">定義 3D 轉化，僅使用用于 X 軸的值。</td> </tr><tr class="calibre18"><td class="calibre23">translateY(y)</td> <td class="calibre23">定義 3D 轉化，僅使用用于 Y 軸的值。</td> </tr><tr class="calibre22"><td class="calibre23">translateZ(z)</td> <td class="calibre23">定義 3D 轉化，僅使用用于 Z 軸的值。</td> </tr><tr class="calibre18"><td class="calibre23">scale3d(x,y,z)</td> <td class="calibre23">定義 3D 縮放轉換。</td> </tr><tr class="calibre22"><td class="calibre23">scaleX(x)</td> <td class="calibre23">定義 3D 縮放轉換，通過給定一個 X 軸的值。</td> </tr><tr class="calibre18"><td class="calibre23">scaleY(y)</td> <td class="calibre23">定義 3D 縮放轉換，通過給定一個 Y 軸的值。</td> </tr><tr class="calibre22"><td class="calibre23">scaleZ(z)</td> <td class="calibre23">定義 3D 縮放轉換，通過給定一個 Z 軸的值。</td> </tr><tr class="calibre18"><td class="calibre23">rotate3d(x,y,z,angle)</td> <td class="calibre23">定義 3D 旋轉。</td> </tr><tr class="calibre22"><td class="calibre23">rotateX(angle)</td> <td class="calibre23">定義沿 X 軸的 3D 旋轉。</td> </tr><tr class="calibre18"><td class="calibre23">rotateY(angle)</td> <td class="calibre23">定義沿 Y 軸的 3D 旋轉。</td> </tr><tr class="calibre22"><td class="calibre23">rotateZ(angle)</td> <td class="calibre23">定義沿 Z 軸的 3D 旋轉。</td> </tr><tr class="calibre18"><td class="calibre23">perspective(n)</td> <td class="calibre23">定義 3D 轉換元素的透視視圖。</td> </tr></tbody></table> ### 源碼本文中所用例子源碼參見[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)