今次就來個大家用3D屬性最愛炫技的場景朴爬，旋轉(zhuǎn)的立方體扣癣，有人聲稱這種動畫簡直代表了CSS3的癲瘋椭坚，不不，是巔峰搏色。做完之后只想吼一聲善茎，你說的沒差！由平面動效進階到立體動效真是……立方體六個面要做足足六種不同的設(shè)置频轿，所以那些玩八面體垂涯，十二面體，……等等的航邢，大寫的“服”字耕赘。其他人做的立方體3D動畫，看了幾個膳殷，差不多都是<div>實現(xiàn)的操骡，嗯哼，我用<SVG>來做一下吧，至于原因嘛册招，后面揭曉岔激，當(dāng)然，如果失敗的話是掰，此句請自動忽略虑鼎。

1. 先立起來

不可避免的，要先來個基礎(chǔ)圖形键痛。錯錯錯炫彩，是基礎(chǔ)物體，反正就是個需要立體的東西絮短，隨便怎么稱呼江兢。基本上有兩種方法可以實現(xiàn)丁频，先來一種直觀好理解的杉允。

看上面這張圖，我把立方體的六個面平鋪開限府，右上角的那個是后面夺颤。此時痢缎，假設(shè)立方體是在視線正前方胁勺，好了，面有了独旷，現(xiàn)在需要把它們折疊起來署穗，像折紙盒一樣，組成一個立方體嵌洼。先看一下dom結(jié)構(gòu)案疲。

<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>也都是相同尺寸，卻沒有進行統(tǒng)一的定義糕档，是因為想嘗試后期給每個SVG定義不同的動畫屬性莉恼。容器的擺放關(guān)系如下圖：

目前，通過position屬性的設(shè)置，六個面是重疊在一起的俐银，因此尿背，在折疊之前，先把每個方塊挪到自己對應(yīng)的位置悉患。移動的CSS屬性就很簡單了残家。根據(jù)圖示，cubic1售躁，也就是正對著我們的面坞淮，不需要移動，其他增加transform: translate相應(yīng)的屬性設(shè)置陪捷，定義如下：

#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*/

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

好了，現(xiàn)在各在其位市袖，下面要各司其職啡直，進行折疊了。

#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;}

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

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

此處應(yīng)有動畫Ｏ澳匀谣！應(yīng)有動畫！资溃！應(yīng)有動畫Ｎ漪帷！（我忘記錄屏了溶锭，天雷滾滾）

這下信了吧宝恶？其實這貨就是個立方體，貨真價實趴捅，只不過我們沒有給最外層的容器（也就是3D變形的舞臺）設(shè)置透視點位置垫毙，默認是屏幕正前方，所以你只看到了一面拱绑。來來來综芥，我把透明度調(diào)整一下，再改改透視原點的位置猎拨，效果是下面這種膀藐。喲，立方體出來了红省。

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

方法二之所以更優(yōu)化，是因為關(guān)于六個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. 再轉(zhuǎn)起來

基礎(chǔ)部件已經(jīng)搭起來了酿傍，下面就讓這個立方體動起來烙懦。說立方體不好理解，但我們在做的時候把它放到了一個content<div>容器里赤炒，因此氯析，讓這個容器做一些變換就可以了。至于用哪種方法得到的立方體莺褒，此處隨意掩缓，我用了二。先來個最簡單的繞Y軸旋轉(zhuǎn)的遵岩，CSS部分如下：

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

效果：

寫到這里暫時停一下你辣，剩下的放到另一篇吧，我要好好想一下關(guān)于3D能做哪些炸裂的效果尘执。等更新舍哄。