用CSS实现翻牌效果

如何利用 CSS3 的 3D 变换、过渡（transition）和透视（perspective）属性，轻松实现无需 JavaScript 的翻转效果？
本文将逐步介绍如何构建一个基本的翻转卡片。

实现原理

翻转效果的核心思路如下：

透视（perspective）： 在容器上设置透视距离，使得子元素具有 3D 效果。
保留3D空间（transform-style: preserve-3d）： 让子元素在 3D 空间中进行旋转。
背面不可见（backface-visibility）： 隐藏翻转后不可见的面。
触发翻转： 通过 hover 状态或点击事件，让包含两个面（正面和背面）的容器进行 180° 翻转。

代码示例

下面是一个完整的示例代码，展示如何用 HTML 和 CSS 实现翻转效果：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>CSS 翻转效果示例</title>
  <style>
    /* 外层容器设置透视效果 */
    .flip-container {
      perspective: 1000px; /* 透视距离越小，3D 效果越明显 */
      width: 300px;
      height: 200px;
      margin: 50px auto;
    }

    /* 包含正面和背面的容器，开启3D空间，并设置过渡效果 */
    .flipper {
      position: relative;
      width: 100%;
      height: 100%;
      transition: transform 0.6s ease;
      transform-style: preserve-3d;
    }

    /* 当鼠标悬停时触发翻转 */
    .flip-container:hover .flipper {
      transform: rotateY(180deg);
    }

    /* 定义正面和背面的基本样式 */
    .front, .back {
      position: absolute;
      width: 100%;
      height: 100%;
      backface-visibility: hidden; /* 隐藏背面 */
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 24px;
      color: #333;
      border: 1px solid #ccc;
      box-sizing: border-box;
      border-radius: 8px;
    }

    /* 正面样式 */
    .front {
      background-color: #f1f1f1;
    }

    /* 背面样式，初始时需要旋转180度以便翻转后显示 */
    .back {
      background-color: #ffcc00;
      transform: rotateY(180deg);
    }
  </style>
</head>
<body>

<div class="flip-container">
  <div class="flipper">
    <div class="front">
      正面
    </div>
    <div class="back">
      背面
    </div>
  </div>
</div>

</body>
</html>

实现效果：

代码解析

透视效果：
- .flip-container 设置了 perspective: 1000px;，这使得子元素在旋转时具有真实的 3D 效果。透视值越小，翻转效果越明显。
3D 空间与过渡效果：
- .flipper 使用 transform-style: preserve-3d; 保持子元素在 3D 空间中进行变换，同时通过 transition 设置翻转动画效果。
正面与背面：
- .front 和 .back 均使用 backface-visibility: hidden; 隐藏在翻转过程中不可见的面。
- .back 初始时通过 transform: rotateY(180deg); 旋转 180°，这样当父元素翻转后，背面能够正常显示。
触发翻转：
- 当鼠标悬停在 .flip-container 上时，通过 .flip-container:hover .flipper 选择器，给 .flipper 应用 transform: rotateY(180deg);，实现翻转效果。