Why Isn’t My 3D View Transition Working?
本文深入探讨CSS视图过渡API中3D动画失效的问题及解决方案。作者首先指出，在跨文档视图过渡中尝试应用3D翻转动画时，使用perspective属性在html或:root元素上无效，导致动画扁平化。这是因为视图过渡伪元素树（如::view-transition）渲染在DOM独立层中，其父元素结构不明确，使得perspective属性无法正确应用。文章通过代码示例展示了常规3D动画的工作原理，强调了perspective在父容器中的重要性，并对比了视图过渡场景下的失败尝试。作者测试了多种设置perspective的方法，包括在body或::view-transition-group中，均未成功。最终解决方案是避免使用perspective属性，转而在关键帧动画中使用perspective()函数，直接将透视效果应用于变换元素。作者解释了perspective属性与perspective()函数的核心区别：属性依赖于父元素，而函数可独立应用，这恰好适应了视图过渡伪元素的渲染特性。文章提供了完整的代码示例和在线演示，帮助开发者理解并实现流畅的3D视图过渡效果，内容聚焦于故障排查与实用技巧，对前端开发者处理复杂CSS动画具有直接指导价值。