在实现这个效果之前，我们需要先理解一下css3中的perspective、transform-style、backface-visibility这三个属性值。

1、概念理解

1.1 perspective

w3school上给perspective 的定义为： 3D 元素距视图的距离，可以简单理解成观察者和物体之间的距离。在css3 3D层面，你也可以把它理解为表示3D效果的一个强度。当为元素定义 perspective 属性时，其子元素会获得透视效果，而不是元素本身。

1.2 transform-style

transform-style：表示子元素需要遵循怎样的空间体系规则。当子元素需要设置空间体系规则的时候，需要在其父元素中设置这个属性。它有两个值：

1. flat表示所有子元素在2D平面呈现；
2. preserve-3d表示所有子元素在3D空间中呈现；

1.3 backface-visibility

backface-visibility：表示当元素不面向屏幕时是否可见。如果在旋转元素不希望看到其背面时，该属性很有用。它同样有两个值：

1. visible表示背面是可见的；
2. hidden表示背面是不可见的；

2、如何实现

2.1 关键HTML代码

    
    
     
      
      
       front
      
      
      
       back
      
    
     
    
复制代码

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、小结

如果有什么疑问或者更好的建议，欢迎在评论区留言。文笔有限，文中若有不正之处，万望告知！