翻牌效果

[coconilu]

实现步骤

一般而言，需要一个容器，包裹两个单面元素。

容器必须要设置：

position: relative;
transform-style: preserve-3d;

relative可以保证子元素的absolute生效；transform-style启用3D效果的翻转

两个单面元素必须要设置：

backface-visibility: hidden;
position: absolute;

backface-visibility指示当元素翻转180度后（也就是背面），是不显示的

效果展示

可以看看我写在CodePen上的示例。