之前我们有讨论过使用CSS3如何实现的效果，而这次我们介绍的是翻转效果更深一层的应用——3D翻牌效果。

这里我们需要使用flip中轴翻转实现，又因为是3D效果，如果希望呈现一定的3D视角，需要在父级元素上添加类名viewport-flip或者直接添加如下CSS：

-webkit-perspective: 1000px; -moz-perspective: 1000px;

perspective的中文意思是：透视，视角！该属性的存在与否决定了你所看到的是2次元的还是3次元的，也就是是2D transform还是3D transform. 这不难理解，没有透视，不成3D。

原理简述

• 当前在前显示的元素翻转90度后隐藏, 动画时间225毫秒
• 225毫秒结束后，之前显示在后面的元素逆向90度翻转显示在前
• 完成翻面效果

也就是纸牌的前后面在两个不同的时间点进行flip效果，构成完整的纸牌翻面效果。

注：Chrome浏览器下需要让元素屏幕垂直居中，以保证元素均在视角内，避免部分区域不显示的情况发生。

以下是具体实现代码：

HTML代码

CSS代码