CSS3实现3D翻牌效果

在实现这个效果之前，我们需要先理解一下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代码

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

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