用CSS3做一个图片翻牌效果

效果展示

思路分析

首先是两张图片应该是叠在一起的，然后要让他旋转的时候展示另一张图片。

知识准备：
transform变形，定位，还有backface-visibility，这后面说什么用的。

1、先来搭建HTML结构

需要两张图片，可以用自己喜欢的，结构也可以写的简单些。

2、然后再来写下基础样式
把父容器放在中间点的位置，方便看，这里说下perspective这个属性，视域，通俗来讲就是值越小，效果也扁平化，越大透视效果越强，也是取决于盒子大小而异，这就需要去调下值，到一个合适的位置。

3、再来就是如何让一个旋转时显示另一张图片了
这里就用到了backface-visibility: hidden;这条属性，意思时当元素旋转到背面时，就不显示隐藏了，就可以用个属性，先让第二张图片旋转180度，让它不显示，这样就可以原本应该在下面的第一张显示了（定位，堆叠级别）。

4、最后添