純css3實(shí)現(xiàn)了一個(gè)正六邊形的走馬燈效果，記錄一下css3動(dòng)畫(huà)的學(xué)習(xí)情況，效果如下：

主要用到的css3技術(shù)有：keyframes、perspective、perspective-origin、transform（translate、rotate）、animation、transform-origin，另外加一點(diǎn)平面幾何知識(shí)（計(jì)算間距、角度啥的），詳細(xì)過(guò)程如下：

首先設(shè)計(jì)一下要顯示的布局（俯視圖），途中垂直的線(xiàn)為輔助線(xiàn)，計(jì)算偏移量時(shí)需要用的：

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

設(shè)置結(jié)構(gòu)：一個(gè)3D場(chǎng)景、一個(gè)走馬燈的旋轉(zhuǎn)面和走馬燈的六個(gè)面：

發(fā)表評(píng)論 共有條評(píng)論 用戶(hù)名: 密碼: 驗(yàn)證碼: 匿名發(fā)表