如何解决CSS边框构成曲线在rotateY旋转动画中消失的问题

你遇到的问题源于使用rotateY进行3D旋转：元素绕Y轴旋转时，在90/270度位置会以侧面朝向视角，而元素本身没有厚度，导致边框完全消失；同时旋转过程中的透视变化会让边框视觉宽度产生波动。

放弃3D旋转，改用以下两种方案实现曲线沿蛋壳边缘移动的效果，全程无视觉变形问题：

方案一：使用CSS路径动画（精准适配） #

利用offset-path定义椭圆路径，让曲线沿蛋壳边缘精准移动，是最直观的实现方式。

<div class="box"></div>

.box {
  width: 50px;
  height: 100px;
  /* 可选：显示蛋壳轮廓辅助观察 */
  border: 3px solid #eee;
  border-radius: 50%;
  position: relative;
}

.box::before {
  content: '';
  position: absolute;
  width: 25px;
  height: 100px;
  border: solid 3px #000;
  border-color: transparent transparent transparent #000;
  border-radius: 50%/50px 0 0 50px;
  /* 定义与蛋壳匹配的椭圆路径 */
  offset-path: ellipse(25px 50px at 25px 50px);
  /* 保持曲线与路径方向一致 */
  offset-rotate: auto 90deg;
  /* 无限循环的线性动画 */
  animation: moveCurve 4s infinite linear;
}

@keyframes moveCurve {
  0% {
    offset-distance: 0%;
  }
  100% {
    offset-distance: 100%;
  }
}

方案二：2D变换模拟（兼容旧浏览器） #

通过平移、水平翻转，配合修改边框圆角和方向，模拟曲线移动效果，无需依赖新特性。

<div class="box"></div>

.box {
  width: 50px;
  height: 100px;
  position: relative;
}

.box::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 25px;
  height: 100%;
  border: solid 3px #000;
  border-color: transparent transparent transparent #000;
  border-radius: 50%/50px 0 0 50px;
  animation: moveCurve 4s infinite ease-in-out;
}

@keyframes moveCurve {
  0% {
    transform: translateX(0) scaleX(1);
    border-radius: 50%/50px 0 0 50px;
    border-color: transparent transparent transparent #000;
  }
  25% {
    transform: translateX(25px) scaleX(1);
    border-radius: 50%/0 50px 50px 0;
    border-color: transparent #000 transparent transparent;
  }
  50% {
    transform: translateX(25px) scaleX(-1);
    border-radius: 50%/50px 0 0 50px;
    border-color: transparent transparent transparent #000;
  }
  75% {
    transform: translateX(0) scaleX(-1);
    border-radius: 50%/0 50px 50px 0;
    border-color: transparent #000 transparent transparent;
  }
  100% {
    transform: translateX(0) scaleX(1);
    border-radius: 50%/50px 0 0 50px;
    border-color: transparent transparent transparent #000;
  }
}

内容的提问来源于stack exchange，提问作者Darpek