CSS動畫非常的有趣；這種技術(shù)的美就在于，通過使用很多簡單的屬性，你能創(chuàng)建出就連皮克斯動畫制作公司也會贊嘆的漂亮的消隱效果。其中代表性的一種就是CSS圖片翻轉(zhuǎn)效果，能讓你看到一張卡片的正反兩面上的內(nèi)容。本文就是要用最簡單的方法向大家介紹如何創(chuàng)建這種效果。

簡單說明：這并不是第一篇我介紹這種技術(shù)的文章，但我發(fā)現(xiàn)那些都過于復雜了。網(wǎng)上還有很多其它的教材，但里面添加了很多多余的代碼樣式，需要讀者去分清哪些是必要的，那些是無用的；本文避免了這些問題，只列出了必要的CSS代碼，你可以在其上添加自己喜歡的風格來美化這些卡片。

HTML代碼

實現(xiàn)正反面效果的HTML代碼，估計你也能想到應該是這樣的：

正如你想到的，應該有兩個容器，分別存放卡片“前面”和“背面”，通過CSS，我們會指定這兩個容器元素自己的作用。還有需要注意的是ontouchstart這段js，它能讓你使用觸屏來觸發(fā)翻轉(zhuǎn)動作。顯然，你應該把這段代碼單獨提取出來，讓JavaScript代碼放到一起。

CSS代碼

我敢打賭，你會感到驚訝，只需要如此少的代碼(如果不考慮各瀏覽器CSS方言前綴)：

下面是大概的整個過程的原理：
1.在最外層的容器元素上設(shè)置整個動畫區(qū)域的透視(perspective)屬性。
2.當外層容器元素遇到鼠標懸停事件時，內(nèi)部存放卡片的容器旋轉(zhuǎn)180度。這里也是控制旋轉(zhuǎn)速度的地方。如果將旋轉(zhuǎn)值設(shè)置為-180deg，是反向旋轉(zhuǎn)。