卡片翻转的实现方式

做微信小程序时有一个翻转卡片的场景，所以研究了一下用 CSS 实现翻转的动画效果，主要使用了 transition 和 transform 结合实现。数字人民币 App 中钱包卡片也有类似翻转效果。

了解 transition 和 transform

• transition 属性可以为一个元素在不同状态之间切换的时候定义不同的过渡效果。

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

实现动画效果

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

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

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

.content {
  width: 400px;
  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 元素距视图的距离，可以理解为元素和观测者的距离，设置该属性可以使动画效果有立体感。当为元素定义 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度（从卡片上方看顺时针），此时正面背向屏幕不显示，反面面向屏幕显示，这样就实现了卡片翻转的动画效果。效果展示

以上。

• 原文链接
• 欢迎关注微信公众号【FE世界】