CSS实现翻牌效果

翻牌动效

在开发过程中，遇到翻红包/翻转扑克牌等类似的需求，请看图

话不多说，请看代码：

<div class="container" id="container">
  <div class="rp front" />
  <div class="rp black" />
</div>

.container {
  width: 200px;
  height: 400px;
  position: relative;
  transform-style: preserve-3d; // 开启3D透视
  transition: transform 1s ease-in-out;
}
.rp {
  left: 0;
  top: 0;
  position: absolute; // 绝对定位，两张图片要重叠在一块
  backface-visibility: hidden; // 隐藏div背后的显示
  background-position: center center;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  width: 100%;
  height: 100%;
}
.front {
  background-image: url('front.png')
}
.back {
  background-image: url('back.png');
  transform: rotateY(180deg); // 反面的图片要翻转过来，这样在翻转到部分的时候就能看到背面的图片
}
.flip {
  transform: rotateY(180deg); // 点击容器，翻转图片
}

document.getElementById('container').onclick = () => {
  this.addClassNames('flip');
}