通过构建 3d 立方体并为各面独立设置样式，可避免传统 `border-radius + rotatey` 导致的边框压缩/消失问题，确保线条在任意旋转角度下保持清晰、等宽。
传统方案（如仅用 border + border-radius + rotateY）在旋转过程中因透视投影和像素渲染机制，会使垂直于视线方向的边框被压扁甚至视觉消失——尤其在 90° 和 270° 时，border-left 完全“侧对”观察者，导致宽度坍缩为 0 或抗锯齿模糊。
正确解法是转向 3D 空间建模：将「曲线边线」抽象为立方体的一个可见面（例如右侧立面），利用 transform-style: preserve-3d 保持子元素的 3D 变换上下文，并通过 translateZ() 将面沿 Z 轴推出，使其在旋转中始终保有正交厚度与清晰边缘。
以下是精简可靠的实现：
<div class="cube"> <div class="face right"></div> </div>
.cube {
position: relative;
width: 25px;
height: 100px;
margin: 50vh auto;
transform-style: preserve-3d;
animation: rotateY 4s infinite ease-in-out;
}
@keyframes rotateY {
0%, 100% { transform: rotateY(0deg); }
50% { transform: rotateY(180deg); }
}
.face {
position: absolute;
background-color: #000;
/* 关键：让“线”成为有厚度的面 */
width: 3px; /* 模拟 border-width */
height: 100px;
/* 沿 Z 轴平移，确保旋转时不退入背景 */
transform: rotateY(90deg) translateZ(12.5px);
}✅ 优势说明：
立即学习“前端免费学习笔记（深入）”；
- width: 3px 的 .face 是真实 DOM 元素，不受 border 渲染失真影响；
- translateZ(12.5px) 提供深度基准，配合 preserve-3d 保证旋转全程维持物理厚度；
- 仅需一个面（.right）即可模拟单侧曲线边线，轻量高效；
- 若需更贴近“蛋壳边缘”的弧度，可将 .face 替换为带 border-radius: 50px / 50px 的细长矩形，或叠加 clip-path 微调轮廓。
⚠️ 注意事项：
- 务必为父容器（.cube）声明 transform-style: preserve-3d，否则子元素的 3D 变换会扁平化；
- translateZ() 值建议设为宽度一半（如 25px 宽 → 12.5px），保证旋转中心对齐；
- 避免在 .face 上使用 border，直接用 background-color + width/height 控制线条尺寸，精度更高。
此方法将视觉动效从「二维变形」升维至「三维空间运动」，从根本上规避了 CSS 边框在透视下的固有缺陷，是实现高质量旋转线条动画的专业级实践。
