CSS3如何做3D翻转效果

CSS3 实现 3D 翻转效果主要依赖 transform、perspective 和 transform-style。下面从原理到常见示例一步步讲清楚。

一、核心属性说明

1️⃣ perspective（透视距离）

决定 3D 效果的“远近感”。

.container {
  perspective: 800px;
}

• 值越小，3D 越夸张
• 值越大，越接近平面

2️⃣ transform-style: preserve-3d

让子元素保持 3D 空间。

.box {
  transform-style: preserve-3d;
}

⚠️ 不加这个，子元素会被压扁成 2D。

3️⃣ transform 中的 3D 函数

常用：

二、最常见的 3D 翻转（卡片翻转）

✅ HTML

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

✅ CSS

.card {
  width: 200px;
  height: 120px;
  perspective: 1000px;
}

.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;
}

.front {
  background: #3498db;
}

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

.card {
  position: relative;
  transform-style: preserve-3d;
  transition: transform 0.8s;
}

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

✅ 效果说明

• 默认显示 正面
• hover 时绕 Y 轴翻转
• 背面一开始就被 rotateY(180deg)
• backface-visibility: hidden 防止正面透过来

三、X 轴翻转（上下翻转）

.card:hover {
  transform: rotateX(180deg);
}

适合：

• 下拉菜单
• 图片展示

四、3D 翻转 + 阴影增强真实感

.card {
  transition: transform 0.8s ease, box-shadow 0.8s;
}

.card:hover {
  transform: rotateY(180deg);
  box-shadow: 0 20px 40px rgba(0,0,0,.3);
}

五、3D 翻转 + 点击触发（JS）

<div class="card" onclick="this.classList.toggle('flip')">
  <div class="front">正面</div>
  <div class="back">背面</div>
</div>

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

六、常见坑位总结 ⚠️

❌ 忘记 perspective → 没有 3D 感
❌ 忘记 backface-visibility: hidden → 正反面同时显示
❌ 给父元素加 overflow: hidden → 3D 被裁剪
❌ 子元素没用 position: absolute → 翻转重叠异常

七、适用场景

✅ 卡片翻转
✅ 商品展示
✅ 登录 / 注册切换
✅ 相册 / 图片墙
✅ 3D 菜单

如果你愿意，我可以帮你：

• ✅ 写一个 纯 CSS 相册翻转
• ✅ 做一个 3D 立方体
• ✅ 结合 Vue / React / 小程序 示例

你打算用在什么场景？