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

概述 3D 变换通过 `transform` 的 3D 函数（`rotateX/rotateY/translateZ` 等）实现；`perspective` 提供透视投影深度；`transform-style: preserve-3d` 保持子元素的 3D 分层。需控制重绘与合成层数量。 示例 ```css .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