在实现这个效果之前，我们需要先理解一下css3中的perspective、transform-style、backface-visibility这三个属性值。
1、概念理解
1.1 perspective
w3school上给perspective 的定义为： 3D 元素距视图的距离，可以简单理解成观察者和物体之间的距离。在css3 3D层面，你也可以把它理解为表示3D效果的一个强度。当为元素定义 perspective 属性时，其子元素会获得透视效果，而不是元素本身。
1.2 transform-style
transform-style：表示子元素需要遵循怎样的空间体系规则。当子元素需要设置空间体系规则的时候，需要在其父元素中设置这个属性。它有两个值：
- flat表示所有子元素在2D平面呈现；
- preserve-3d表示所有子元素在3D空间中呈现；
1.3 backface-visibility
backface-visibility：表示当元素不面向屏幕时是否可见。如果在旋转元素不希望看到其背面时，该属性很有用。它同样有两个值：
- visible表示背面是可见的；
- hidden表示背面是不可见的；
2、如何实现
2.1 关键HTML代码
<div class="wrapper"><div class="card"><div class="card-face card-front">front</div><div class="card-face card-back">back</div></div>
</div>
复制代码2.2 关键CSS代码
.wrapper {margin: 100px auto;border: 1px solid #ccc;width: 200px;height: 300px;perspective: 600px;
}.card {position: relative;width: 100%;height: 100%;transition: transform 1s;transform-style: preserve-3d;cursor: pointer;&.active {transform: rotateY(180deg);}
}.card-face {position: absolute;width: 100%;height: 100%;line-height: 260px;color: #fff;text-align: center;font-weight: bold;font-size: 40px;backface-visibility: hidden;&.card-front {background-color: #f00;}&.card-back {background-color: #4577dc;transform: rotateY(180deg);}
}复制代码当我们需要点击卡片实现前后反转的时候，直接在card类上增减active类即可！
2.2 实际预览效果
3、小结
如果有什么疑问或者更好的建议，欢迎在评论区留言。文笔有限，文中若有不正之处，万望告知！