css3 走馬燈效果

純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場景、乙個走馬燈的旋轉面和走馬燈的六個面：

<
div 
class
>
<
div 
class
="rotate"
>
<
div 
class
="item itemone"
>1
div>
<
div 
class
="item itemtwo"
>2
div>
<
div 
class
="item itemthree"
>3
div>
<
div 
class
="item itemfour"
>4
div>
<
div 
class
="item itemfive"
>5
div>
<
div 
class
="item itemsix"
>6
div>
div>
div>

設定3d場景：

觀察距離800

*/-webkit-perspective-origin:50% -100%; /*

從正前方上方斜向下觀察

*/width:400px;height:300px;margin:100px auto;

}設定旋轉面：

@-webkit-keyframes rotation100%}

.rotate

對六個面除了位置之外的通用樣式做設定：

.item

分別設定六個面的位置，以一號為例（上面結構圖中紅框下面左邊綠色線標註的面），所有的數值均需要經過幾何計算得來：

.itemone

在滑鼠懸浮在該結構上時動畫停止：

.rotate:hover

本例子只有在webkit核心的瀏覽器中可以檢視效果，如需相容其他現代瀏覽器，需新增 -moz- 等字首，完整**如下：

doctype html
>
<
html
>
<
head
>
<
meta 
charset
="utf-8"
>
<
title
>animation test
title
>
<
style
>
*@-webkit-keyframes rotation
100%
}.rotate
.item
.itemone
.itemtwo
.itemthree
.itemfour
.itemfive
.itemsix
.rotate:hover
style
>
head
>
<
body
>
<
div 
class
>
<
div 
class
="rotate"
>
<
div 
class
="item itemone"
>1
div>
<
div 
class
="item itemtwo"
>2
div>
<
div 
class
="item itemthree"
>3
div>
<
div 
class
="item itemfour"
>4
div>
<
div 
class
="item itemfive"
>5
div>
<
div 
class
="item itemsix"
>6
div>
div>
div>
body
>
html
>

css3 走馬燈效果

文字走馬燈效果

學習筆記 32 CSS3走馬燈

縱向的走馬燈，有停頓效果

css3 走馬燈效果

文字走馬燈效果

學習筆記 32 CSS3走馬燈

縱向的走馬燈，有停頓效果

相關推薦