做微信小程序时有一个翻卡片的需求，所以研究了一下用 CSS3 实现翻转的动画渐变效果。主要使用了 transition 和 transform 结合实现。

了解 transition 和 transform

• transition 属性在 CSS3 transition 属性 中有详细介绍。

• transform 属性向元素应用 2D 或 3D 转换。该属性允许我们对元素进行旋转、缩放、移动或倾斜。

实现动画效果

先创建卡片的结构，一个容器 div ，内部定位两个 div （卡片的正面和反面）。

<div class="content-box">
  <div class="content front">正面</div>
  <div class="content back">反面</div>
</div>

.content-box {
  width: 600px;
  height: 600px;
  position: relative;
  /* 距离观测者的距离，使翻转效果有立体感 */
  perspective: 2000px;
  -webkit-perspective: 2000px;
}

.content {
  width: 600px;
  height: 600px;
  position: absolute;
  left: 0;
  top: 0;
  backface-visibility: hidden;
  transition: 1s;
}

.back {
  transform: rotateY(180deg);
}

容器 div.content-box 的两个关键属性：

perspective: 2000px;
-webkit-perspective: 2000px;

perspective 属性定义 3D 元素距视图的距离，以像素计。该属性允许改变 3D 元素查看 3D 元素的视图。可以理解为元素和观测者的距离，设置该属性可以使动画效果有立体感。当为元素定义 perspective 属性时，其子元素会获得透视效果，而不是元素本身。

perspective 属性只影响 3D 转换元素。可以和 perspective-origin 属性一起使用定义 3D 元素所基于的 X 轴和 Y 轴。

正面 div.front 和反面 div.back 的关键属性：

backface-visibility: hidden;
transition: 1s;

backface-visibility 属性定义当元素不面向屏幕时是否可见。设置为 hidden 即正面和反面只显示面向屏幕的一面。

transition 属性定义动画过渡的时间。

反面 div.back 还有一个关键属性：

transform: rotateY(180deg);

即反面初始状态时先旋转180度（从卡片上方看逆时针），此时反面背向屏幕，所以不显示。

当触发翻转事件（hover/click/…）时给正面和反面增加以下 CSS 属性：

.front.turn {
  transform: rotateY(-180deg);
}

.back.turn {
  transform: rotateY(0deg);
}

正面和反面都旋转了180度（从卡片上方看顺时针），此时正面背向屏幕不显示，反面面向屏幕显示，这样就实现了卡片翻转的动画效果。效果展示

以上。