本教程共 44 篇 · 第 37 篇 · 更新于 2026-07-29 · 约 12 分钟阅读

37. 3D 变换

本节目标：理解 CSS 3D 变换的核心概念，掌握透视设置、三轴旋转和立体位移，能够实现卡片翻转等常见 3D 效果。

2D 变换只在平面上操作，3D 变换增加了 Z 轴，让元素具有深度和立体感。但要让 3D 效果看起来正确，必须理解”透视”这个概念。

perspective：透视距离

perspective 定义观察者到 z=0 平面的距离。值越小，透视效果越强（元素变形更夸张）；值越大，透视越平缓。

.scene {
  perspective: 800px;
}

Note

要加在父元素上，而不是被变换的元素本身。它给所有子元素建立统一的 3D 空间。

<!DOCTYPE html>
<html lang="zh">
<head>
  <style>
    .scene {
      width: 200px;
      height: 200px;
      perspective: 600px;
      margin: 60px;
    }
    .box {
      width: 100%;
      height: 100%;
      background: linear-gradient(135deg, #3498DB, #2ECC71);
      transition: transform 0.6s;
    }
    .scene:hover .box {
      transform: rotateY(180deg);
    }
  </style>
</head>
<body>
  <div class="scene">
    <div class="box"></div>
  </div>
</body>
</html>

rotateX / rotateY / rotateZ：三轴旋转

3D 旋转有三个轴：

rotateX()：绕水平轴（X 轴）旋转，元素会”前倾”或”后仰”
rotateY()：绕垂直轴（Y 轴）旋转，元素会”左右翻转”
rotateZ()：绕 Z 轴旋转，效果同 2D 的 rotate()

transform: rotateX(45deg); /* 前倾 */
transform: rotateY(90deg); /* 侧翻 */
transform: rotateZ(45deg); /* 平面旋转 */

<!DOCTYPE html>
<html lang="zh">
<head>
  <style>
    .scene {
      display: flex;
      gap: 30px;
      padding: 40px;
      perspective: 800px;
    }
    .card {
      width: 120px;
      height: 160px;
      display: flex;
      align-items: center;
      justify-content: center;
      color: white;
      font-size: 14px;
      border-radius: 8px;
      transition: transform 0.5s;
    }
    .card1 { background: #E74C3C; }
    .card2 { background: #3498DB; }
    .card3 { background: #2ECC71; }
    .card1:hover { transform: rotateX(45deg); }
    .card2:hover { transform: rotateY(45deg); }
    .card3:hover { transform: rotateZ(30deg); }
  </style>
</head>
<body>
  <div class="scene">
    <div class="card card1">rotateX</div>
    <div class="card card2">rotateY</div>
    <div class="card card3">rotateZ</div>
  </div>
</body>
</html>

translate3d：立体位移

translate3d(x, y, z) 在三个方向上移动元素。正值 Z 向观察者靠近（看起来更大），负值远离。

transform: translate3d(50px, 30px, 100px);

<!DOCTYPE html>
<html lang="zh">
<head>
  <style>
    .scene {
      perspective: 600px;
      margin: 80px;
    }
    .box {
      width: 100px;
      height: 100px;
      background: #9B59B6;
      transition: transform 0.4s;
    }
    .box:hover {
      transform: translate3d(0, 0, 80px); /* 向观察者靠近 */
    }
  </style>
</head>
<body>
  <div class="scene">
    <div class="box">靠近我</div>
  </div>
</body>
</html>

transform-style：保留 3D 空间

默认情况下，子元素的 3D 变换会被”压扁”。设置 transform-style: preserve-3d 可以让子元素在真正的 3D 空间中渲染。

.parent {
  transform-style: preserve-3d;
  transform: rotateY(30deg);
}
.child {
  transform: translateZ(50px); /* 这个位移在 3D 空间中有效 */
}

做 3D 立方体、卡片翻转等效果时，

是必须的。否则子元素的 3D 变换不会生效。

backface-visibility：背面可见性

当元素旋转到背对观察者时，默认背面会镜像显示。backface-visibility: hidden 可以让背面不可见。

.card {
  backface-visibility: hidden;
}

这是实现卡片翻转效果的关键：

<!DOCTYPE html>
<html lang="zh">
<head>
  <style>
    .scene {
      width: 200px;
      height: 260px;
      perspective: 800px;
      margin: 60px;
    }
    .card {
      width: 100%;
      height: 100%;
      position: relative;
      transform-style: preserve-3d;
      transition: transform 0.6s;
    }
    .scene:hover .card {
      transform: rotateY(180deg);
    }
    .face {
      position: absolute;
      width: 100%;
      height: 100%;
      backface-visibility: hidden;
      display: flex;
      align-items: center;
      justify-content: center;
      color: white;
      font-size: 18px;
      border-radius: 12px;
    }
    .front {
      background: linear-gradient(135deg, #3498DB, #2980B9);
    }
    .back {
      background: linear-gradient(135deg, #E74C3C, #C0392B);
      transform: rotateY(180deg);
    }
  </style>
</head>
<body>
  <div class="scene">
    <div class="card">
      <div class="face front">正面</div>
      <div class="face back">背面</div>
    </div>
  </div>
</body>
</html>

perspective-origin：透视原点

perspective-origin 定义观察者的位置，默认是中心 50% 50%。

.scene {
  perspective: 800px;
  perspective-origin: top left; /* 从左上角观察 */
}

实战：3D 立方体

综合运用所有 3D 属性，可以搭一个旋转立方体：

<!DOCTYPE html>
<html lang="zh">
<head>
  <style>
    .scene {
      width: 200px;
      height: 200px;
      perspective: 600px;
      margin: 100px auto;
    }
    .cube {
      width: 100%;
      height: 100%;
      position: relative;
      transform-style: preserve-3d;
      animation: spin 8s infinite linear;
    }
    .face {
      position: absolute;
      width: 200px;
      height: 200px;
      background: rgba(52, 152, 219, 0.85);
      border: 2px solid #2980B9;
      display: flex;
      align-items: center;
      justify-content: center;
      color: white;
      font-size: 20px;
      font-weight: bold;
    }
    .front  { transform: translateZ(100px); }
    .back   { transform: rotateY(180deg) translateZ(100px); }
    .right  { transform: rotateY(90deg) translateZ(100px); }
    .left   { transform: rotateY(-90deg) translateZ(100px); }
    .top    { transform: rotateX(90deg) translateZ(100px); }
    .bottom { transform: rotateX(-90deg) translateZ(100px); }

    @keyframes spin {
      from { transform: rotateX(0) rotateY(0); }
      to   { transform: rotateX(360deg) rotateY(360deg); }
    }
  </style>
</head>
<body>
  <div class="scene">
    <div class="cube">
      <div class="face front">前</div>
      <div class="face back">后</div>
      <div class="face right">右</div>
      <div class="face left">左</div>
      <div class="face top">上</div>
      <div class="face bottom">下</div>
    </div>
  </div>
</body>
</html>

3D 变换速查

属性/函数	作用
`perspective`	透视距离（父元素）
`perspective-origin`	透视原点
`transform-style: preserve-3d`	保留 3D 空间
`backface-visibility`	背面可见性
`rotateX/Y/Z()`	绕指定轴旋转
`translate3d()`	立体位移
`scale3d()`	立体缩放

3D 变换的关键是理解”透视”：没有 perspective，所有 3D 变换看起来都是平面的。先给场景设好透视，再给元素应用变换，顺序不能反。