立方體3d旋轉效果
通過上面的主題，我們就應該要知道今天我們需要那些東西來完成主題所說的立方體3d旋轉特效。
我們需要立方體、旋轉屬性、動畫這三個知識點。
第一步
我們要在網頁中搭建立方體。
（分析：網頁中是二維畫面，我們需要三維畫面）
是以我們需要一個屬性：
transform-style: preserve-3d;
。這個屬性，來改變網頁中立方體所在的父元素為三維。
transform-style: preserve-3d;
第二部
我們要了解網頁中是怎麼實作立方體的。
 |  |
上面是兩種立方體實作方法的過程。
（分析：通過gif圖檔動态示範，做出這樣的立方體，我們需要那些屬性)
通過分析後，我們應該需要以下屬性：
3d平移：
transform:translate3D（X,Y,Z）;
3d平移定義3d移動transform:translate3D（X,Y,Z）;
定義3d移動中，隻用X軸的值transform:translateX（）;
定義3d移動中，隻用Y軸的值transform:translateY（）;
（值不能為百分比）定義3d移動中，隻用Z軸的值transform:translateZ（）;
3d旋轉：
transform：rotate3D（X,Y,Z,a）;
3d旋轉定義沿着X軸進行3d旋轉transform:rotateX（）;
定義沿着Y軸進行3d旋轉transform:rotateY（）;
定義沿着Z軸進行3d旋轉transform:rotateZ（）;
transform：rotate3D（X,Y,Z,a）;
定義3d旋轉
x：是一個0到１之間的數值，主要用來描述元素圍繞X軸旋轉的矢量值；
y：是一個０到１之間的數值，主要用來描述元素圍繞Y軸旋轉的矢量值；
z：是一個０到１之間的數值，主要用來描述元素圍繞Z軸旋轉的矢量值；
a：是一個角度值，主要用來指定元素在3D空間旋轉的角度，如果其值為正值，元素順時針旋轉，反之元素逆時針旋轉。
改變原點
transform-origin：水準方向 垂直方向;
.
通過上面的屬性我們京可以實作基本的立方體了。
代碼如下:
第三部
旋轉動畫，在上面立方體的實作中，就用到了這個屬性。而這裡是對整個立方體進行3d的旋轉。
我們先來看看兩種不同方法做出來的立方體的3d旋轉是有什麼差別。
| 方法一 做出來的立方體正義旋轉 | 方法二 做出來的立方體正義旋轉 |
其實他們都是用了一樣的關鍵幀動畫屬性。
關鍵幀動畫
動畫 ：
animation：關鍵幀名稱 動畫持續時間 動畫類型 動畫延遲 動畫次數；
animation: 複合屬性
animation-name : ;關鍵幀的名稱
animation-duration : ;(動畫的持續的時間)
animation-timing-function: ; 動畫運用的類型（勻速linear、加速度、減速度、貝塞爾曲線）
animation-delay: ; (動畫的延遲)
animation-iteration-count： ； 動畫運動的次數（預設情況下運動1次） infinite(無限循環)
animation-direction （運動的方向）
屬性值：
- reverse：反方向運作 （ 讓關鍵幀從後往前執行 ）
- alternate：動畫先正常運作再反方向運作，并持續交替運作
- alternate-reverse：動畫先反運作再正方向運作，并持續交替運作
制定關鍵幀：
@keyframes 關鍵幀名稱{ 0%{開始狀态} 25%{} 50%{} 75%{} 100%{結束狀态}}
下面是兩種關鍵幀的用法
| @keyframes 關鍵幀的名稱{ 0%{ //開始狀态 } 25%{ } 50%{ } ...... 100%{ //結束狀态 } } | @keyframes 關鍵幀的名稱{ from{} to{} } |
通下面的代碼，我們就可以實作上面的立方體3d旋轉效果了。
代碼如下：