CSS rotate致箭头偏移，如何实现箭头平滑旋转与位置固定？

我来帮你搞定这两个问题！旋转时位置偏移的核心原因是变换原点的基准没对齐，或者动画过程中变换顺序没处理好；而平滑旋转只需要在keyframes里合理拆分动画阶段就行。

一、解决旋转位置偏移的问题 #

当你用rotate()旋转元素时，如果元素的定位基准不是自身中心，或者变换原点不对，就会出现偏移。针对你的箭头图片，我们可以这样处理：

1. 固定变换原点为元素中心
   默认transform-origin就是center center，但如果你的箭头图片有额外的空白或padding，可能需要显式设置，同时加上transform-box: border-box;确保变换原点基于元素的边框盒（也就是图片实际的宽高范围）：

   .arrow {
     /* 原有样式 */
     transform-origin: center center;
     transform-box: border-box;
   }
   

2. 用transform进行居中定位，避免top/left的基准问题
   不要直接依赖top/left来调整垂直位置，改用transform: translate(0, -50%);让箭头垂直居中，这样旋转时是以自身中心为轴，不会出现偏移：

   .arrow {
     position: absolute;
     top: 50%;
     left: 0; /* 初始位置在左侧 */
     width: 24px;
     height: 10px;
     transform: translate(0, -50%); /* 垂直居中 */
     transform-origin: center center;
     transform-box: border-box;
   }
   

二、用CSS3 keyframes实现平滑旋转+移动的完整动画 #

我们把动画拆分成4个阶段，确保移动和旋转的过渡都平滑：

• 初始状态：左侧，无旋转
• 0% -> 40%：从左向右移动到右侧，保持无旋转
• 40% -> 60%：在右侧位置保持不动，平滑旋转180度
• 60% -> 100%：从右向左移动回左侧，保持旋转后的状态

完整的CSS代码如下：

.bg {
  width: 100%;
  height: 100vh;
  position: relative;
  background: #f5f5f5;
}

.arrow {
  width: 24px;
  height: 10px;
  position: absolute;
  top: 50%;
  left: 0;
  /* 用transform垂直居中，避免旋转偏移 */
  transform: translate(0, -50%);
  transform-origin: center center;
  transform-box: border-box;
  /* 替换成你的箭头图片路径，img标签也适用 */
  background: url('你的箭头图片路径') no-repeat center/contain;
  /* 动画设置：总时长4秒，无限循环，线性过渡 */
  animation: arrowMoveRotate 4s infinite linear;
}

@keyframes arrowMoveRotate {
  /* 初始位置：左侧，无旋转 */
  0% {
    left: 0;
    transform: translate(0, -50%) rotate(0deg);
  }
  /* 移动到右侧，保持无旋转 */
  40% {
    left: calc(100% - 24px); /* 减去箭头宽度避免超出容器 */
    transform: translate(0, -50%) rotate(0deg);
  }
  /* 在右侧完成180度旋转 */
  60% {
    left: calc(100% - 24px);
    transform: translate(0, -50%) rotate(180deg);
  }
  /* 移动回左侧，保持旋转状态 */
  100% {
    left: 0;
    transform: translate(0, -50%) rotate(180deg);
  }
}

对应的HTML：

<div class="bg">
  <div class="arrow"></div>
  <!-- 如果是img标签，替换成：
  <img src="你的箭头图片路径" class="arrow" alt="箭头">
  -->
</div>

关键细节说明 #

• 变换顺序很重要：在transform里，一定要先写translate再写rotate，因为CSS变换是从右往左解析的（先执行rotate再执行translate会导致位置偏移）。
• 旋转阶段的时间占比：我设置了20%的时间（40%-60%）用来旋转，你可以根据需求调整这个比例，让旋转更快或更慢。
• 容器相对定位：.bg要设置position: relative;，这样箭头的绝对定位才会基于这个容器。

这样处理后，箭头旋转时就不会出现位置偏移，整个动画的移动和旋转也会非常平滑~

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