今次就來個大家用3D屬性最愛炫技的場景，旋轉的立方體，有人聲稱這種動畫簡直代表了CSS3的癲瘋，不不，是巔峰。做完之后只想吼一聲，你說的沒差！由平面動效進階到立體動效真是……立方體六個面要做足足六種不同的設置，所以那些玩八面體，十二面體，……等等的，大寫的“服”字。其他人做的立方體3D動畫，看了幾個，差不多都是<div>實現的，嗯哼，我用<SVG>來做一下吧，至于原因嘛，后面揭曉，當然，如果失敗的話，此句請自動忽略。

1. 先立起來

不可避免的，要先來個基礎圖形。錯錯錯，是基礎物體，反正就是個需要立體的東西，隨便怎么稱呼。基本上有兩種方法可以實現，先來一種直觀好理解的。

看上面這張圖，我把立方體的六個面平鋪開，右上角的那個是后面。此時，假設立方體是在視線正前方，好了，面有了，現在需要把它們折疊起來，像折紙盒一樣，組成一個立方體。先看一下dom結構。

<div class="stage">
<div class="content">
<svg   id="cubic1" xmlns="http://www.w3.org/2000/svg" >
<rect   height="200" width="200" />
</svg>
<svg   id="cubic2" xmlns="http://www.w3.org/2000/svg" >
<rect   height="200" width="200" />
</svg>
<svg   id="cubic3" xmlns="http://www.w3.org/2000/svg" >
<rect   height="200" width="200" />
</svg>
<svg   id="cubic4" xmlns="http://www.w3.org/2000/svg" >
<rect   height="200" width="200" />
</svg>
<svg   id="cubic5" xmlns="http://www.w3.org/2000/svg" >
<rect   height="200" width="200" />
</svg>
<svg   id="cubic6" xmlns="http://www.w3.org/2000/svg" >
<rect   height="200" width="200" />
</svg>
</div>
</div>

非常簡單，我定義了兩個容器，一個是舞臺stage，一個是包裹立方體的content，content里是6個SVG，每個SVG只有一個簡單的矩形rect。我的目的是讓content在stage里進行3D動效變化。

CSS定義如下：

.stage {width: 800px; height: 600px; background:#e5fffb; perspective:1000px;}
.content{transform-style: preserve-3d}
#cubic1{fill:#f29a76}
#cubic2{fill:#61BFBE}
#cubic3{fill:#BADDD6}
#cubic4{fill:#FFB5BA}
#cubic5{fill:#866667}
#cubic6{fill:#E25D6E}
SVG {position: absolute;top:200px; left:300px;width:200px; height:300px}

6個SVG都是寬200，高200，雖然里面的矩形<rect>也都是相同尺寸，卻沒有進行統一的定義，是因為想嘗試后期給每個SVG定義不同的動畫屬性。容器的擺放關系如下圖：

目前，通過position屬性的設置，六個面是重疊在一起的，因此，在折疊之前，先把每個方塊挪到自己對應的位置。移動的CSS屬性就很簡單了。根據圖示，cubic1，也就是正對著我們的面，不需要移動，其他增加transform: translate相應的屬性設置，定義如下：

#cubic2{fill:#61BFBE;transform: translateZ(-200px)} /*后面遠離屏幕200px移動*/
#cubic3{fill:#BADDD6;transform: translateY(-200px)} /*上面垂直向上200px*/
#cubic4{fill:#FFB5BA;transform: translateX(200px)} /*右面水平向右200px*/
#cubic5{fill:#866667;transform: translateY(200px)} /*下面垂直向下200px*/
#cubic6{fill:#E25D6E;transform: translateX(-200px)} /*左面水平向左200px*/

移動之后的效果是下面這種（閑著也是閑著，我把移動過程做了動效）：

好了，現在各在其位，下面要各司其職，進行折疊了。

#cubic3{fill:#BADDD6;transform: translateY(-200px) rotateX(90deg) ;transform-origin: bottom center;}
#cubic4{fill:#FFB5BA;transform: translateX(200px) rotateY(90deg);transform-origin: center left;}
#cubic5{fill:#866667;transform: translateY(200px)  rotateX(-90deg);transform-origin:top center;}
#cubic6{fill:#E25D6E;transform: translateX(-200px) rotateY(-90deg);transform-origin: center right;}

完成之后，效果是下面這種：

（這特么是不是在逗我，就一個平面非說是個立方體……！）別急，就知道你會這樣說，所以我用動效展示一下這個過程：

此處應有動畫！！應有動畫！！應有動畫！！（我忘記錄屏了，天雷滾滾）

這下信了吧？其實這貨就是個立方體，貨真價實，只不過我們沒有給最外層的容器（也就是3D變形的舞臺）設置透視點位置，默認是屏幕正前方，所以你只看到了一面。來來來，我把透明度調整一下，再改改透視原點的位置，效果是下面這種。喲，立方體出來了。

完成第一步的旋轉，下面就是要進行全體位移了，那么重點來了。
以左面cubic6為例，如下圖所示：

方法二之所以更優化，是因為關于六個cubic的定義簡化如下：

#cubic1{fill:#f29a76;transform:translateZ(100px);}
#cubic2{fill:#61BFBE;transform:translateZ(-100px);}
#cubic3{fill:#BADDD6;transform:rotateX(90deg) translateZ(-100px)}
#cubic4{fill:#FFB5BA;transform:rotateY(-90deg) translateZ(100px)}
#cubic5{fill:#866667;transform:rotateX(-90deg)translateZ(-100px)}
#cubic6{fill:#E25D6E;transform: rotateY(90deg) translateZ(100px)}

2. 再轉起來

基礎部件已經搭起來了，下面就讓這個立方體動起來。說立方體不好理解，但我們在做的時候把它放到了一個content<div>容器里，因此，讓這個容器做一些變換就可以了。至于用哪種方法得到的立方體，此處隨意，我用了二。先來個最簡單的繞Y軸旋轉的，CSS部分如下：

@keyframes content{
to{transform: rotateY(360deg)translateZ(20px)}
}
.content{transform-style: preserve-3d; animation:content 2s linear both infinite; }

效果：

寫到這里暫時停一下，剩下的放到另一篇吧，我要好好想一下關于3D能做哪些炸裂的效果。等更新。