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

概述

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