純css3實現(xiàn)了一個正六邊形的走馬燈效果，記錄一下css3動畫的學(xué)習(xí)情況，效果如下：
主要用到的css3技術(shù)有：keyframes、perspective、perspective-origin、transform（translate、rotate）、animation、transform-origin，另外加一點平面幾何知識（計算間距、角度啥的），詳細過程如下：
首先設(shè)計一下要顯示的布局（俯視圖），途中垂直的線為輔助線，計算偏移量時需要用的：
紅色框框為旋轉(zhuǎn)面（即走馬燈效果的結(jié)構(gòu)最終以該面的中點為旋轉(zhuǎn)軸旋轉(zhuǎn)的），六個面也都是基于這個面做的布局，先看紅框下面的三個面，左側(cè)的面原本在藍色線處，通過旋轉(zhuǎn)到達綠色線處，右邊同理，中間的面只需要在Z軸方向移動二分之根號三個邊長的距離即可，所有的面均通過偏移和旋轉(zhuǎn)的方式達到上圖的結(jié)構(gòu)，需要注意的是要保證有圖案的面（本例中使用的是文字，思路一致）要向外，比如上面中間的面，在Z軸向外偏移二分之根號三個邊長的距離之后還要以中點為圓心旋轉(zhuǎn)180°，所有的面同理易得。在此過程中需要牢記的一點技術(shù)是：三維坐標系中，從坐標原點出發(fā)，向著坐標軸的正方向看去，逆時針旋轉(zhuǎn)時rotate(X/Y/Z)的值為正數(shù)，順時針旋轉(zhuǎn)時，rotate(X/Y/Z)值為負數(shù)。
設(shè)置結(jié)構(gòu)：一個3D場景、一個走馬燈的旋轉(zhuǎn)面和走馬燈的六個面：
設(shè)置3D場景：
設(shè)置旋轉(zhuǎn)面：
