CSS实现按钮凸出的翻转卡片

今天来讲如何写出一个按钮带有凸出感的翻转卡片。gif表现的太生硬了，真实效果比gif好。

原理

主要属性涉及：backface-visibility、transform-style、transform这三个属性。
主要思路：通过Y轴的翻转实现【翻面效果】，Z的偏移量实现【凸出】效果显示。

实战

步骤一、

// 基本结构
<div class="card">
  <div class="front"></div>
  <div class="back"></div>
</div>

步骤二、
这是卡片基本结构，接下来要实现翻转效果主要是通过transform: rotateY(deg)进行旋转，用backface-visibility：hidden把【背向】屏幕的元素隐藏。

// 卡片
.card {
  width: 200px;
  height: 200px;
  border-radius: 20px;
  overflow: hidden;
  position: relative;
  transform-style: preserve-3d;
}
// 前后通用样式
.front,
.back {
  width: