CSS图片翻转动画技术详解（IE也实现了）

CSS动画非常的有趣；这种技术的美就在于，通过使用很多简单的属性，你能创建出就连皮克斯动画制作公司也会赞叹的漂亮的消隐效果。其中代表性的一种就是CSS图片翻转效果，能让你看到一张卡片的正反两面上的内容。本文就是要用最简单的方法向大家介绍如何创建这种效果。

简单说明：这并不是第一篇我介绍这种技术的文章，但我发现那些都过于复杂了。网上还有很多其它的教材，但里面添加了很多多余的代码样式，需要读者去分清哪些是必要的，那些是无用的；本文避免了这些问题，只列出了必要的CSS代码，你可以在其上添加自己喜欢的风格来美化这些卡片。

HTML代码

实现正反面效果的HTML代码，估计你也能想到应该是这样的：

正如你想到的，应该有两个容器，分别存放卡片“前面”和“背面”，通过CSS，我们会指定这两个容器元素自己的作用。还有需要注意的是ontouchstart这段js，它能让你使用触屏来触发翻转动作。显然，你应该把这段代码单独提取出来，让JavaScript代码放到一起。

CSS代码

我敢打赌，你会感到惊讶，只需要如此少的代码(如果不考虑各浏览器CSS方言前缀)：

下面是大概的整个过程的原理：
1.在最外层的容器元素上设置整个动画区域的透视(perspective)属性。
2.当外层容器元素遇到鼠标悬停事件时，内部存放卡片的容器旋转180度。这里也是控制旋转速度的地方。如果将旋转值设置为-180deg，是反向旋转。