CSS 3D Transform（旋转动画）无法完整持续旋转问题求助

你的rotateY动画在完成一次旋转后出现反向转回，核心原因是：浏览器在动画循环衔接时，会计算从结束状态到起始状态的最短路径——从rotateY(-360deg)回到rotateY(0deg)的最短路径是正向旋转360度，而非继续保持反向旋转，导致视觉上出现“反向转回”的假象。

修复方案 #

方案一：调整关键帧为正向累加旋转

修改关键帧的结束值为rotateY(360deg)，保持线性无限循环，这样每次循环都会自然沿同一方向衔接，不会触发反向过渡：

.square {
  width: 200px;
  height: 100px;
  animation: spinx 10s infinite linear;
}

@keyframes spinx {
  from {
    transform: rotateY(0deg);
  }
  to {
    transform: rotateY(360deg);
  }
}

方案二：强制保持反向旋转方向

如果需要持续反向旋转，可以添加animation-direction: reverse，同时配合正向关键帧实现：

.square {
  width: 200px;
  height: 100px;
  animation: spinx 10s infinite linear reverse;
}

@keyframes spinx {
  from {
    transform: rotateY(0deg);
  }
  to {
    transform: rotateY(360deg);
  }
}

方案三：使用大角度累加实现持续旋转

直接设置更大的旋转角度，利用CSS动画的累加特性，让循环自然延续旋转方向：

.square {
  width: 200px;
  height: 100px;
  animation: spinx 10s infinite linear;
}

@keyframes spinx {
  0% {
    transform: rotateY(0deg);
  }
  100% {
    transform: rotateY(1080deg); /* 设置3圈的角度，循环时会继续累加旋转 */
  }
}

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