CSS 3D 变换与透视：perspective 与 transform-style preserve-3d

---

title: CSS 3D 变换与透视：perspective 与 transform-style preserve-3d

keywords:

• perspective
• transform-style
• preserve-3d
• 3D 变换
• 合成层

description: '说明 CSS 3D 变换的基础与透视投影，使用 perspective 与 transform-style: preserve-3d

构建分层效果，控制视觉深度与性能边界，并提供示例与回退。'

categories:

• 文章资讯
• 编程技术

---

概述

3D 变换通过 transform 的 3D 函数（rotateX/rotateY/translateZ 等）实现；perspective 提供透视投影深度；transform-style: preserve-3d 保持子元素的 3D 分层。需控制重绘与合成层数量。

示例

.scene { perspective: 800px }
.card { transform-style: preserve-3d }
.card__face--front { transform: translateZ(20px) }
.card__face--back { transform: rotateY(180deg) translateZ(20px) }

工程建议

• 性能：限制 3D 层级与动效范围；优先使用合成层属性；避免在低端设备过度使用。
• 交互与可访问性：提供非动效回退；在 prefers-reduced-motion 下禁用复杂 3D。
• 兼容：不同浏览器呈现可能差异；测试并提供 2D 回退样式。

参考与验证

• MDN CSS 变换文档：https://developer.mozilla.org/docs/Web/CSS/transform
• MDN perspective 文档：https://developer.mozilla.org/docs/Web/CSS/perspective