"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/transformMDN `perspective` 文档：https://developer.mozilla.org/docs/Web/CSS/perspective