css3如何实现翻转卡片

在 CSS3 中，实现翻转卡片（Flip Card）通常结合 transform、transition 和 backface-visibility 来实现。下面给你一个最常见、最实用的方案。

一、HTML 结构

<div class="card">
  <div class="card-inner">
    <div class="card-front">正面</div>
    <div class="card-back">背面</div>
  </div>
</div>

二、CSS 样式

/* 卡片容器 */
.card {
  width: 200px;
  height: 260px;
  perspective: 1000px; /* 3D 透视 */
}

/* 内层，用于翻转 */
.card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  transition: transform 0.6s;
  transform-style: preserve-3d;
}

/* 鼠标悬停翻转 */
.card:hover .card-inner {
  transform: rotateY(180deg);
}

/* 正反面公共样式 */
.card-front,
.card-back {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden; /* 隐藏背面 */
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  color: #fff;
}

/* 正面 */
.card-front {
  background: #3498db;
}

/* 背面 */
.card-back {
  background: #e74c3c;
  transform: rotateY(180deg);
}

三、实现原理说明

1. perspective
   给父元素加透视，形成 3D 效果

2. transform-style: preserve-3d
   保留子元素的 3D 空间

3. backface-visibility: hidden
   翻转后隐藏背面，避免内容重叠

4. rotateY(180deg)
   实现左右翻转（也可用 rotateX 做上下翻转）

四、点击翻转（JS 控制）

如果你想要点击翻转而不是 hover：

document.querySelector('.card').onclick = function () {
  this.classList.toggle('flipped');
};

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

五、常见变体

• ✅ 上下翻转：rotateX(180deg)
• ✅ 双面不同内容
• ✅ 卡片列表（多张）
• ✅ 移动端触摸翻转

如果你需要 React / Vue 版本、移动端适配 或 更炫的动画效果，告诉我我可以继续帮你写。