用CSS3做一个图片翻牌效果

效果展示

思路分析

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

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

1、先来搭建HTML结构

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

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

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

4、最后添加一个悬停效果

悬停时让第一张旋转-180度，第二张再转回来，因为堆叠级别的原因，第二张本来就在第一张的上面，之前看不到，是因为旋转到背面隐藏了，转回来后自然就显示出来了，添加过渡后就大功告成了

这简单，还好看的翻牌效果就分享到这里了。

总结
这整个效果需要理解backface-visibility: hidden;属性，其次就是堆叠级别了，想好谁在上，谁在下。

————纵然是在巨人的肩膀上学习……