CSS 中的 3D 变换 transform

FreeGuideOnline 最新 2026-07-07

CSS 3D 变换完全指南：从平面到立体

CSS 3D 变换让你能在网页中创建真实的立体空间，让元素在 X、Y、Z 三个轴向上自由移动、旋转和缩放。本教程将从零开始，带你掌握所有核心概念与实战技巧。

为什么需要 3D 变换

传统的网页是二维的，元素只能水平或垂直移动。但借助 CSS transform 属性的 3D 函数，你可以：

制作翻转卡片、3D 轮播、立方体等交互效果
构建沉浸式的产品展示或数据可视化
让页面动画更具层次感和真实感
完全不依赖 WebGL 或 Canvas，仅用 CSS 即可实现

必须先理解一个底层概念：透视（perspective）。

开启 3D 空间：透视（perspective）

如果没有透视，所有的 3D 变换看起来都只是平面上的缩放或扭曲。透视定义了观察者与 z=0 平面之间的距离，让近处的元素看起来更大，远处的更小。

两种设置透视的方式

1. 在父容器上设置 perspective 属性（推荐）
让所有子元素共享同一个透视点，产生统一的 3D 场景感。

.scene {
  perspective: 600px; /* 数值越小，透视感越强 */
}

2. 在变换函数中使用 perspective()
只影响当前元素本身，且透视点固定为元素中心。

.card {
  transform: perspective(600px) rotateY(30deg);
}

通常，为整个 3D 场景设置 perspective 更灵活，可以配合 perspective-origin 改变观察点。

透视对视觉的影响

perspective: 300px：强烈的近大远小，适合夸张的 3D 效果
perspective: 1000px：微弱的透视，接近正交投影
默认透视原点为容器中心，可通过 perspective-origin: left top; 等值调整

开启 3D 渲染：transform-style

即使设置了透视，子元素默认仍会被“压扁”在父元素的平面上。要让子元素真正活在 3D 空间里，必须告诉父元素保留 3D 上下文。

.scene {
  perspective: 600px;
  transform-style: preserve-3d; /* 关键！让子元素保持 3D 位置 */
}

若没有 preserve-3d，所有子元素都会投影到父元素的 2D 平面内，失去立体叠加效果。

3D 变换函数详解

transform 属性可以组合多个 3D 函数，顺序会影响最终效果。以下为最核心的 3D 函数。

沿 Z 轴平移：translateZ()

让元素在纵深方向移动。正值移向观察者（变大），负值远离观察者（变小）。

.element {
  transform: translateZ(100px); /* 向前移动 100px */
}

translate3d(x, y, z) 是简写：

transform: translate3d(0, 0, 100px); /* 等价于 translateZ(100px) */

绕轴旋转：rotateX(), rotateY(), rotateZ()

rotateX(angle)：绕水平轴旋转（像翻书页）
rotateY(angle)：绕垂直轴旋转（像开门）
rotateZ(angle)：绕 Z 轴旋转（与 2D 的 rotate() 相同）

.element {
  transform: rotateY(45deg); /* 绕 Y 轴旋转 45 度 */
}

组合旋转时顺序至关重要：rotateX(30deg) rotateY(45deg) 与 rotateY(45deg) rotateX(30deg) 结果不同。

3D 缩放：scaleZ() 与 scale3d()

scaleZ() 单独改变元素在 Z 方向的比例，但通常需配合其他变换才能看到效果。更多使用 scale3d(x, y, z) 统一缩放。

.element {
  transform: scale3d(1, 1, 2); /* Z 轴伸长一倍 */
}

变换原点：transform-origin

transform-origin 定义旋转或缩放的中心点。在 3D 中，第三个值代表 Z 轴上的偏移。

.element {
  transform-origin: left top -50px; /* 原点在左上角，并向屏幕外偏移 50px */
  transform: rotateY(45deg);
}

控制背面可见性：backface-visibility

当元素旋转超过 90 度时，其背面会面向观察者。默认情况下，背面是可见的（内容被镜像）。多数 3D 效果中需要隐藏背面。

.card-face {
  backface-visibility: hidden;
}

隐藏背面常用于卡片翻转效果：正面和背面两个元素叠放，旋转时只显示朝向屏幕的那一面。

实战：搭建一个 3D 立方体

利用上述知识，仅用 HTML 和 CSS 就能造出一个可旋转的立方体。

HTML 结构

<div class="cube-scene">
  <div class="cube">
    <div class="face front">前</div>
    <div class="face back">后</div>
    <div class="face left">左</div>
    <div class="face right">右</div>
    <div class="face top">上</div>
    <div class="face bottom">下</div>
  </div>
</div>

CSS 核心样式

.cube-scene {
  width: 200px;
  height: 200px;
  perspective: 800px;
  margin: 80px auto;
}

.cube {
  width: 100%;
  height: 100%;
  position: relative;
  transform-style: preserve-3d;
  transition: transform 1s;
}

.face {
  position: absolute;
  width: 200px;
  height: 200px;
  background: rgba(0, 123, 255, 0.7);
  border: 2px solid white;
  color: white;
  font-size: 2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  backface-visibility: hidden;
}

/* 将每个面平移到正确位置并旋转 */
.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); }

要让立方体旋转，只需给 .cube 添加悬停或动画：

.cube:hover {
  transform: rotateX(-30deg) rotateY(45deg);
}

常用技巧与注意事项

多层嵌套的 3D 上下文：每一层想要保持 3D 都需要设置 transform-style: preserve-3d。
性能优化：大量 3D 变换可能触发重绘或合成，尽量使用 will-change: transform 提前通知浏览器。
Z 轴单位与坐标系：记住 z 轴正方向从屏幕指向观察者，负方向指向屏幕内部。
隐藏溢出：3D 场景的外层容器可设置 overflow: hidden 防止变换元素超出视口。
调试辅助：给元素加上半透明背景或不同颜色的面，更容易观察立体关系。

浏览器兼容性速查

现代浏览器对 CSS 3D 变换支持良好，但 IE11 及以下不支持 transform-style: preserve-3d。移动端 Safari 偶尔需要 -webkit- 前缀。生产环境建议通过 Autoprefixer 自动添加前缀。

通过掌握以上核心概念，你已能创建大多数常见的 3D 交互效果。从卡片翻转到全景产品展示，CSS 3D 变换为你的界面设计打开了一扇新的大门。