本文详解如何使用 CSS 3D 变换（transform-style: preserve-3d、translateZ、rotateY）构建文字沿球面轨迹环绕中心图像的动态效果，并确保图像本身完全静止——关键在于将图像元素移出动画容器并全局启用 3D 渲染上下文。
本文详解如何使用 css 3d 变换（`transform-style: preserve-3d`、`translatez`、`rotatey`）构建文字沿球面轨迹环绕中心图像的动态效果，并确保图像本身完全静止——关键在于将图像元素移出动画容器并全局启用 3d 渲染上下文。
在实现「文字环绕静态 3D 图像」这一视觉效果时，开发者常陷入一个典型误区：将所有元素（包括目标图像）嵌套在同一动画容器内。一旦父容器应用了 transform 动画（如 rotateY 或 rotateX），其所有子元素都会继承该变换，导致图像也随文字一同旋转——这与“图像固定、文字绕行”的设计目标相悖。
核心解决方案只有两点：
- 结构解耦：将 .phone_static（图像容器）从 .preloader 动画主体中完全移出，使其脱离任何旋转动画的作用域；
- 3D 上下文透传：为 元素显式声明 transform-style: preserve-3d，确保其子级（包括独立的 .phone_static）能正确参与同一 3D 坐标空间的渲染，从而实现视觉上的空间共存与深度错觉。
以下为优化后的完整实现逻辑：
✅ 正确的 HTML 结构
<div class="preloader"> <!-- 所有旋转文字均在此容器内 --> <div class="preloader__ring">...</div> <div class="preloader__ring">...</div> </div> <!-- ⚠️ 关键：图像必须位于 .preloader 外部，且同级 --> <div class="phone_static"> <img src="https://github.com/Jitlclarke/ux_portfolio/blob/main/images/small_version_mockup.png?raw=true" alt="Static device mockup"> </div>
✅ 必要的 CSS 调整
/* 启用 body 级别 3D 渲染上下文 —— 这是实现空间定位一致性的前提 */
body {
transform-style: preserve-3d;
background-color: #333;
}
/* 确保动画容器自身支持 3D 子元素 */
.preloader,
.preloader__ring {
transform-style: preserve-3d;
}
/* 静态图像精确定位（基于 3D 空间） */
.phone_static {
position: absolute;
top: 50%;
left: 50%;
/* 使用 translate 调整至视觉中心，避免受动画影响 */
transform: translate(-39%, -13%) translateZ(0);
/* translateZ(0) 显式置于 Z=0 平面，强化“静止”语义 */
}
.phone_static img {
width: 250px;
height: auto;
display: block;
}? 关键原理说明
- transform-style: preserve-3d 不可继承，必须在每个需要参与 3D 空间计算的祖先节点上显式设置（包括 body）；
- 文字 .preloader__sector 通过 translateZ(7rem) 沿 Z 轴“推出”，再配合 rotateY() 实现环形排布，形成球面投影效果；
- .phone_static 虽无动画，但因处于同一 preserve-3d 上下文中，其 transform: translate(...) 会与文字的 translateZ 产生真实深度关系，从而自然呈现“文字从前到后绕行图像”的 3D 错觉；
- 绝对定位 + translate 组合替代 top/left 像素硬编码，提升响应式鲁棒性。
⚠️ 常见陷阱与规避建议
- ❌ 错误：将 .phone_static 留在 .preloader 内部 → 图像必然随父容器旋转；
- ❌ 错误：仅给 .preloader 设置 preserve-3d，忽略 body → 图像无法与文字共享 Z 轴坐标系，导致层叠错乱或透视失效；
- ✅ 推荐：为 .phone_static 添加 transform: translateZ(0)，明确其 Z 位置，避免浏览器渲染歧义；
- ✅ 调试技巧：临时添加 outline: 1px solid red 到 .phone_static 和 .preloader__ring，直观验证二者是否在相同 3D 空间中正确定位。
通过以上结构与样式的协同优化，即可稳定实现文字流畅环绕、图像绝对静止的沉浸式 3D 效果——无需 JavaScript，纯 CSS 驱动，性能高效且语义清晰。
