本文讲解如何通过 css 3d 变换（`transform-style: preserve-3d`）替代单纯 `border` + `border-radius` 的二维方案，解决旋转过程中边框因透视压缩而变细甚至消失的问题。
在 css 动画中，直接对一个仅靠 border 和 border-radius 构建的“弧形线”应用 rotateY()，会导致浏览器在 3D 空间中对该元素进行正交投影——当旋转角度接近 90° 或 270° 时，元素在 Z 轴方向的“厚度”被压扁至视觉不可见，表现为边框宽度急剧收缩甚至完全消失。这不是 bug，而是 border 本身不具备真实三维体积的必然结果。
根本解法是：放弃用 border 模拟线条，转而用具有明确尺寸与深度的 3D 面（
）来构建可稳定渲染的几何轮廓。下面是一个轻量、可控且兼容性良好的实现方案：
✅ 推荐方案：使用 3D 立方体面模拟“曲边线”
我们创建一个中心对齐的 .cube 容器，并启用 3D 渲染上下文；再为每个关键视角（前、后、左、右）添加独立的 .face 元素，每个面都沿 Z 轴平移一定距离，确保其在旋转时始终面向视图或按需呈现：
.cube { position: relative; margin: 30vh 50vw; /* 居中显示 */ transform-style: preserve-3d; /* 关键：保留子元素的 3D 位置 */ animation: rotateLoop 4s infinite ease-in-out; } @keyframes rotateLoop { 0%, 100% { transform: rotateY(0deg); } 50% { transform: rotateY(180deg); } } .face { position: absolute; background-color: #000; /* 所有面统一尺寸：模拟一条竖直黑线 */ width: 3px; /* 线宽（建议 2–4px，避免抗锯齿模糊） */ height: 120px; /* 线高 */ } .front { transform: translateZ(1.5px); } .back { transform: rotateY(180deg) translateZ(1.5px); } .left { transform: rotateY(-90deg) translateZ(1.5px); } .right { transform: rotateY(90deg) translateZ(1.5px); }对应 html 结构只需四个面（前、后、左、右），无需顶部/底部（除非需要闭合效果）：
立即学习“前端免费学习笔记（深入）”；
⚠️ 注意事项
- 不要滥用 border-radius 配合 rotateY：它本质是二维裁剪，在 3D 旋转下无深度信息，必然失真；
- transform-style: preserve-3d 必须设在动画父容器上，否则子元素会扁平化到同一平面；
- translateZ() 值需略大于 width/2（如 width: 3px → translateZ(1.5px)），保证各面不重叠又保持视觉连贯；
- 若需更精细的“蛋壳边缘”曲线感，可在 .face 上叠加 clip-path: ellipse(…) 或使用 svg
替代，但 CSS 3D 方案已满足绝大多数流畅旋转需求。
该方法不仅彻底规避了边框消失问题，还具备良好的性能（GPU 加速）、可扩展性（支持多色、渐变、阴影）及语义清晰性——每一根“线”都是一个真实、可独立控制的 dom 元素。