必须为父容器设置transform-style: preserve-3d并配合perspective，子元素按球面坐标用rotateX/rotateY/translateZ定位，动画仅叠加rotateY实现公转，辅以阴影、渐变和投影增强立体感。
用 transform-style: preserve-3d 激活 3D 空间是前提
没有这句，所有 transform: rotateX/Y/Z() 都会扁平化渲染，球体只是“看起来像”，实际是平面旋转。必须加在父容器上，且该容器不能有 overflow: hidden（会裁剪 3D 投影）。
常见错误：只给子元素加 preserve-3d，或加在 body 上但被某层 transform 中断了 3D 上下文。
- 正确写法：
.sphere-container { transform-style: preserve-3d; } - 父容器需设
perspective（如perspective: 1000px），值越小球体“凸起感”越强，但太小会导致边缘畸变 - 避免在父容器上同时使用
transform（如translateZ()），可能意外重置 3D 坐标系
用 rotateX() 和 rotateY() 组合控制球面点位
纯 CSS 实现球体，本质是把多个子元素（如 div）按球面坐标分布——每个点的 transform 由经纬度换算而来。不用 JS 计算的话，就得手动写几十个 transform: rotateX(...) rotateY(...) translateZ(...)。
关键参数关系：translateZ(r) 决定半径，rotateX(lat) 控制纬度（上下），rotateY(lng) 控制经度（左右）。
立即学习“前端免费学习笔记（深入）”；
- 例如一个在赤道、东经 45° 的点：
transform: rotateY(45deg) translateZ(200px);
- 北纬 30°、东经 60°：
transform: rotateX(-30deg) rotateY(60deg) translateZ(200px);
（注意 X 轴旋转方向：正数向下倾，所以北纬用负值） - 点越多越接近球面，但超过 30–40 个后 CSS 体积陡增，且浏览器重排压力明显上升
用 @keyframes 实现自转时，别直接动球容器
如果对 .sphere-container 加 animation: spin 8s infinite linear，整个空间会绕自身轴转，但内部点的相对位置不变——结果是“一坨东西在转”，不是“球在滚”。真正自然的球体自转，应让每个点独立绕球心公转 + 自旋。
更可行的做法：固定球心不动，让所有子元素统一加动画，但动画里只改 rotateY()（模拟绕 Y 轴公转），再配合不同初始 rotateX() 实现立体感。
- 示例动画定义：
@keyframes spin-y { to { transform: rotateY(360deg); } } - 每个子元素设相同动画，但初始
transform已含各自的rotateX和translateZ，动画只叠加rotateY - 若想模拟真实滚动（接触面静止），得用 JS 动态算相位差，纯 CSS 做不到物理级滚动效果
阴影和渐变材质会让球体“立住”，否则容易飘
CSS 球体最常被吐槽“像贴纸”，问题出在缺乏深度线索：没有明暗过渡、没有环境遮蔽、没有反光变化。纯色 + 硬边 = 平面幻觉。
- 给每个点加
box-shadow模拟受光面：box-shadow: inset 0 -10px 20px rgba(255,255,255,0.3);
- 用
background: radial-gradient(circle at 30% 30%, #fff, #aaa)模拟高光，位置随点位微调 - 球体底部加伪元素
::after做椭圆投影：.sphere::after { content: ''; position: absolute; width: 120%; height: 30%; border-radius: 50%; background: rgba(0,0,0,0.2); transform: translateY(120%) scale(0.8); }
这些细节不改变几何结构，但极大影响视觉可信度。没它们，再准的球面坐标也像 SVG 切片拼起来的。
