CSS3实现动态翻牌效果 仿百度贴吧3D翻牌一次动画特效

实现CSS3动态翻牌效果，需要以下步骤：

1. HTML结构

我们需要一些HTML结构来构建翻牌所需的图形元素。下面是示例结构：

<div class="flip-card">
  <div class="flip-card-inner">
    <div class="flip-card-front">
      <!-- 正面内容 -->
    </div>
    <div class="flip-card-back">
      <!-- 背面内容 -->
    </div>
  </div>
</div>

外层 .flip-card 是容器，内层 .flip-card-inner 用于实现翻转效果，.flip-card-front 和 .flip-card-back 分别是正面和背面内容。

2. CSS样式

下面是示例CSS样式：

.flip-card {
  /* 默认状态为 2D 平面状态，鼠标移入容器，触发翻转效果 */
  transform-style: preserve-3d;
  perspective: 1000px; /* 观察者距离元素的距离，配合 perspective 和 transform 实现翻转效果 */

  /* 隐藏背面内容 */
  .flip-card-back {
    display: none;
  }
}

.flip-card:hover .flip-card-inner { /* 鼠标移入容器，翻转容器 */ 
  transform: rotateY(180deg); /* 沿 Y 轴旋转 180 度 */
}

.flip-card-inner {
  transition: transform 0.6s ease-out; /* 定义翻转的动画过渡时间 */
  transform-style: preserve-3d; /* 防止子元素 3D 效果消失 */
  position: relative;
  height: 100%; /* 高度设置为 100%，使内容撑满整个容器 */
}

.flip-card-front, .flip-card-back {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden; /* 隐藏背面可见性，解决翻转过程中闪屏问题 */
}

.flip-card-back {
  transform: rotateY(180deg); /* 翻转180度，初始状态为背面 */
  display: block; /* 展示出背面内容 */
}

在这个样式中，我们建立一个 .flip-card 容器，设置其transform-style以及perspective等属性，制定了它的基本样式。

使用:hover实现鼠标移入容器，触发翻转的效果。我们定义了两个子元素 .flip-card-front 和 .flip-card-back，使用backface-visibility属性解决翻转过程中的闪动问题。

需要注意的是 transition 属性。它是定义了动画过渡时间，比如 0.6s，以及动画的加速度和速度曲线，比如 ease-out。

3. 示例1

现在我们将代码运用到实际中，在代码pen中创建一个flip-card类，每一个.card都有front和back。

首先，我们建立了一个标准的 HTML 结构。

<div class="flip-card">
  <div class="flip-card-inner">
    <div class="flip-card-front">
      <img src="https://via.placeholder.com/150x150" alt="placeholder image">
    </div>
    <div class="flip-card-back">
      <h2>Back Title</h2>
      <p>Some text. Some text. Some text. Some text. Some text. Some text. Some text.</p>
    </div>
  </div>
</div>

然后，我们编写一些简单的 CSS：

.flip-card {
  width: 150px;
  height: 150px;
  margin: 50px;
  perspective: 1000px;
}

.flip-card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  transition: transform 0.6s;
  transform-style: preserve-3d;
}

.flip-card-front,
.flip-card-back {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
}

.flip-card-front {
  background-color: #1e1e1e;
}

.flip-card-back {
  transform: rotateY(180deg);
  background-color: #4CAF50;
  color: white;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.flip-card:hover .flip-card-inner {
  transform: rotateY(180deg);
}

现在，您应该能够使用 Hover 在您的卡片之间轻松翻转。

4. 示例2

下面是另一个示例，使用了更复杂的 HTML 结构：

<div class="flip-card">
  <div class="flip-card-inner">
    <div class="flip-card-front">
      <img src="https://via.placeholder.com/150x150" alt="placeholder image">
      <h2>Front Title</h2>
    </div>
    <div class="flip-card-back">
      <img src="https://via.placeholder.com/150x150" alt="placeholder image">
      <h2>Back Title</h2>
      <p>Some text. Some text. Some text. Some text. Some text. Some text. Some text.</p>
    </div>
  </div>
</div>

在这个示例中，我们添加了一个标题，更加复杂的 HTML 结构。现在，我们更新 CSS：

.flip-card {
  width: 300px;
  height: 450px;
  margin: 50px;
  perspective: 1000px;
}

.flip-card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  text-align: center;
  transition: transform 0.6s;
  transform-style: preserve-3d;
}

.flip-card-front,
.flip-card-back {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 20px;
}

.flip-card-front {
  background-color: #1e1e1e;
  color: white;
}

.flip-card-front h2 {
  margin-top: 0;
}

.flip-card-back {
  transform: rotateY(180deg);
  background-color: #4CAF50;
  color: white;
}

.flip-card-back h2, .flip-card-back p {
  margin: 0;
}

.flip-card-back p {
  margin-top: 15px;
}

.flip-card:hover .flip-card-inner {
  transform: rotateY(180deg);
}

示例 2 难度略大，但如果您详细阅读了上述 CSS 代码，您就应该能够掌握它。