小莫的成神之旅（二）純css3實現翻轉效果

小莫碎碎念

小莫見到很多**的翻轉效果很炫，忍不住手癢癢，遂摩拳擦掌打算研究一番，無奈17素材網上很多成型的外掛程式都比較複雜，不適合小莫這樣的小白，所以找到乙個簡單的栗子趕緊拿來和眾小白分享，大神請繞路，大神請繞路，大神請繞路，重要的事情說三遍！

雖然小莫研究了一番，但自我感覺還沒吃到css3的精髓，下面只是小莫一些淺顯的理解，如有紕漏，還望眾小白海涵，眾大神不吝賜教。

由於是直接從網上找的栗子，所以直接上乾貨，省略實現思路這一模組。

最終**

1
doctype html
>
2<
html
>
3<
head
>
4<
meta 
charset
="utf-8"
>
5<
style
>6/*
entire container, keeps perspective */7
.flip-container 
12/*
flip the pane when hovered 
*/13
.flip-container:hover .flipper 
1718
.flip-container, .front, .back 
2223
/*flip speed goes here 
*/24
.flipper 
3031
/*hide back of pane during swap 
*/32
.front, .back 
4546
/*front pane, placed above back 
*/47
.front 
5051
/*back, initially hidden pane 
*/52
.back 
57style
>
5859
head
>
60<
body
>
61<
div 
class
="flip-container"
>
62<
div 
class
="flipper"
>
63<
div 
class
="front"
>
64             front
65div
>
66<
div 
class
="back"
>
67             back
68div
>
69div
>
70div
>
71body
>
72html
>

**分析首先，先來科普幾個官方定義：

perspective 屬性定義 3d 元素距檢視的距離，以畫素計。該屬性允許您改變 3d 元素檢視 3d 元素的檢視。當為元素定義 perspective 屬性時，其子元素會獲得透視效果，而不是元素本身。通俗點說就是父元素新增這個屬性後，子元素可以呈現3d的效果。比方說像下面左圖介樣，如果不設定它，就會像右邊介樣：

transform 屬性向元素應用 2d 或 3d 轉換。該屬性允許我們對元素進行旋轉、縮放、移動或傾斜。也就是說我們的動畫效果主要是依靠它滴，這是乙個神奇的屬性，只有你想不到的沒有它做不到的！（誇張手法，誇張手法，見諒見諒）

transition 屬性是乙個簡寫屬性，用於設定四個過渡屬性。簡單來說這是翻轉動畫的執行者。

transform-style 屬性規定如何在 3d 空間中呈現被巢狀的元素。這個屬性可以有兩種值：flat，子元素將不保留其 3d 位置（也就是說，當transform-style為flat的時候，再對其子元素改變3d位置則不起作用）；preserve-3d子元素將保留其 3d 位置。

backface-visibility 屬性定義當元素不面向螢幕時是否可見。

好，下面小莫課堂正式開課啦！

既然要實現翻轉效果，那首先要定義乙個雙面div，預設顯示正面，滑鼠hover顯示反面，滑鼠離開則顯示正面，但在這之前我們需要乙個裝雙面div的盒子，就像下面這樣：

1
<
div 
class
="flip-container"
>23
div>
4<
style
>
5.flip-container 
10style
>

盒子有了，下面就要定義雙面div了，就像一張撲克牌，雖然有兩面但它仍舊是乙個整體，我們來定義一張撲克牌...呃，定義乙個雙面div：

1
<
div 
class
="flipper"
>23
div>
4<
style
>
5.flip-container 
18style
>

下面就是撲克牌的正反面，也就是雙面div正反面的內容：

1
<
div 
class
="front"
>
2          front
3div
>
4<
div 
class
="back"
>
5          back
6div
>
7<
style
>
8.front, .back 
2122
.front 
2526
.back 
31style
>

盒子、雙面div、正反面內容都有了，萬事俱備只欠「翻轉」這個東風啦：

.flip-container:hover .flipper

當滑鼠hover到盒子上則執行過度動畫，這裡沒有把hover加到雙面div上是因為，雙面div在旋轉過程中元素的位置大小都會發生變化：

到此為止，翻轉功能就算是圓滿啦！

小莫在找栗子的時候還找到了另乙個品相不太好的栗子，就是不給雙面div加翻轉動作，而將翻轉動作加到正反面div上，在只有正反面的時候這樣做顯然有些累贅，但如果是多面內容可能就不同，這種方法或許更靈活些，當然現在小莫的技能還沒點到那個級別，多面翻轉的功能留著日後實現吧！

總結

一入css3深似海，從此xx是路人！（這裡xx泛指各種動畫外掛程式，請自行腦補。）為什麼總覺得沒有個總結就不算是寫完了呢？這是個不好的習慣，咳咳。（寫**湊字數留下的惡習，見諒見諒）

小莫的成神之旅（二）純css3實現翻轉效果

純CSS3實現的標籤效果

純CSS3實現的標籤效果

純css3實現滾動的公告

小莫的成神之旅（二）純css3實現翻轉效果

純CSS3實現的標籤效果

純CSS3實現的標籤效果

純css3實現滾動的公告

相關推薦