純css3實現了一個正六邊形的走馬燈效果，記錄一下css3動畫的學習情況，效果如下：

主要用到的css3技術有：keyframes、perspective、perspective-origin、transform（translate、rotate）、animation、transform-origin，另外加一點平面幾何知識（計算間距、角度啥的），詳細過程如下：

首先設計一下要顯示的布局（俯視圖），途中垂直的線為輔助線，計算偏移量時需要用的：

紅色框框為旋轉面（即走馬燈效果的結構最終以該面的中點為旋轉軸旋轉的），六個面也都是基于這個面做的布局，先看紅框下面的三個面，左側的面原本在藍色線處，通過旋轉到達綠色線處，右邊同理，中間的面只需要在Z軸方向移動二分之根號三個邊長的距離即可，所有的面均通過偏移和旋轉的方式達到上圖的結構，需要注意的是要保證有圖案的面（本例中使用的是文字，思路一致）要向外，比如上面中間的面，在Z軸向外偏移二分之根號三個邊長的距離之后還要以中點為圓心旋轉180°，所有的面同理易得。在此過程中需要牢記的一點技術是：三維坐標系中，從坐標原點出發，向著坐標軸的正方向看去，逆時針旋轉時rotate(X/Y/Z)的值為正數，順時針旋轉時，rotate(X/Y/Z)值為負數。

設置結構：一個3D場景、一個走馬燈的旋轉面和走馬燈的六個面：

發表評論 共有條評論 用戶名: 密碼: 驗證碼: 匿名發表