如何用 CSS 3D 立方体结构实现稳定旋转的曲线边框动画

通过构建 3d 立方体并为各面独立设置样式，可避免传统 `border-radius + rotatey` 导致的边框压缩/消失问题，确保线条在任意旋转角度下保持清晰、等宽。

传统方案（如仅用 border + border-radius + rotateY）在旋转过程中因透视投影和像素渲染机制，会使垂直于视线方向的边框被压扁甚至视觉消失——尤其在 90° 和 270° 时，border-left 完全“侧对”观察者，导致宽度坍缩为 0 或抗锯齿模糊。

正确解法是转向 3D 空间建模：将「曲线边线」抽象为立方体的一个可见面（例如右侧立面），利用 transform-style: preserve-3d 保持子元素的 3D 变换上下文，并通过 translateZ() 将面沿 Z 轴推出，使其在旋转中始终保有正交厚度与清晰边缘。

以下是精简可靠的实现：

.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 变换会扁平化；
• transl

  

  ateZ() 值建议设为宽度一半（如 25px 宽 → 12.5px），保证旋转中心对齐；
• 避免在 .face 上使用 border，直接用 background-color + width/height 控制线条尺寸，精度更高。

此方法将视觉动效从「二维变形」升维至「三维空间运动」，从根本上规避了 CSS 边框在透视下的固有缺陷，是实现高质量旋转线条动画的专业级实践。