創意HTML5文字特效 類似翻頁的效果

之前在網上看到一款比較有新意的HTML5文字特效，文字效果是當滑鼠滑過是出現翻開折疊的效果，類似書本翻頁。于是我興緻勃勃的點開源碼看了一下，發現其實實作也挺簡單的，主要利用了CSS3的transform屬性，分别對X軸、Y軸、Z軸進行翻轉，先看一下效果截圖。

看效果圖這些文字是不是很有立體的感覺，而這個立體的感覺并不是有投影和陰影來實作的，而是通過翻轉。

接下來我們來看一下源碼。首先是HTML代碼，非常簡單，列出我們需要渲染的文字：

接下來是核心CSS3代碼，這裡我們略去了控制頁面樣式的CSS代碼，把實作翻頁效果文字的CSS代碼提取出來。

這樣我們就讓這些字母安安靜靜的排列起來，并有了自己的背景顔色，等待強大的CSS3來渲染。

接下來我們要讓文字在滑鼠滑過的時候産生翻轉傾斜的動畫。

這裡我們利用了CSS3的僞類before和after來快速構造兩個相同的字母，然後利用transform屬性的rotateX，rotateY，rotateZ來翻轉，再利用skew來時文字傾斜。

由于東西也比較簡單，全是代碼，沒啥好詳細解說的，有問題請指正，見笑了，呵呵。