通过构建 3d 立方体结构并仅展示单一面（如 front 面），可规避 `border-radius` + `rotatey` 导致的边框压扁/消失问题，实现视觉上连续、等宽的弧形线条旋转动画。
在 CSS 动画中，直接对一个带 border-radius 和单侧边框（如 border-left）的元素使用 transform: rotateY()，会导致浏览器在透视投影下将该边框“压扁”——尤其在 90° 和 270° 时，边框因正对视线方向而退化为一条不可见的线（视觉厚度趋近于 0）。这不是 Bug，而是 3D 变换中平面法向量与观察方向重合时的自然渲染结果。
✅ 正确解法是放弃依赖 border 渲染曲线轮廓，转而用 3D 定位的矩形面（.face）模拟线条：
- 创建一个 .cube 容器，启用 transform-style: preserve-3d 以维持子元素的 3D 空间关系；
- 将多个 .face 元素沿 Z 轴平移并绕 Y/X 轴旋转，精准定位到立方体表面；
- 只保留需要显示的面（如 .front）作为“弧形线”的载体，其余面可隐藏或设为透明；
- 对整个 .cube 应用 rotateY() 动画，由于 .front 面始终正对视图（Z 轴朝外），其宽度、高度与 border-radius 均保持稳定渲染。
以下是精简可靠的实现代码（仅保留关键面，适配原需求的“蛋壳边缘弧线”效果）：
.cube {
position: relative;
width: 25px;
height: 200px;
margin: 30vh auto;
transform-style: preserve-3d;
animation: rotateEgg 4s infinite ease-in-out;
}
@keyframes rotateEgg {
0%, 100% { transform: rotateY(0deg); }
50% { transform: rotateY(180deg); }
}
.face {
position: absolute;
background: #000;
/* 关键：沿 Z 轴前移，确保 front 面始终在可视深度 */
transform: translateZ(12.5px);
}
.front {
width: 25px;
height: 200px;
/* 使用 border-radius 模拟蛋壳左缘弧线 */
border-radius: 50%/100px 0 0 100px;
/* 仅保留左侧边框（或用 background-gradient 更可控） */
border-left: 3px solid #000;
}⚠️ 注意事项：
立即学习“前端免费学习笔记（深入）”；
- 不要给 .front 设置 border-color: transparent transparent transparent #000 —— 在 3D 上透明边框仍会受透视影响；建议改用 border-left 或纯 background + border-radius 组合；
- 若需更平滑的蛋壳曲线，可用 clip-path: path('M...') 或 SVG
替代 CSS 边框，获得像素级控制； - 动画性能优化：为 .cube 添加 will-change: transform，并在支持环境下启用 backface-visibility: hidden。
总结：当 CSS 边框在 3D 旋转中失真时，本质是渲染模型限制。跳出 border 思维，用 3D 定位的“面”承载视觉元素，既保持动画流畅性，又彻底解决线条消失问题——这是构建复杂 3D UI 动画的通用范式。
