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

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

HTML代码

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

复制代码代码如下:
div class="flip-container lazy " ontouchstart="this.classList.toggle(’hover’);"
div class="flipper lazy "
div class="front lazy "
!-- 前面内容 --
/div
div class="back lazy "
!-- 背面内容 --
/div
/div
/div

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

CSS代码

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

复制代码代码如下:
/* entire container, keeps perspective */
.flip-container {
perspective: 1000;
}
/* flip the pane when hovered */
.flip-container:hover .flipper, .flip-container.hover .flipper {
transform: rotateY(180deg);
}%2