如何让插图沿曲线路径移动？

你提到的transform: translateX()确实只能实现线性平移，没法直接做曲线运动。至于transform-origin，它主要是用来设置变换（比如旋转、缩放）的基准点，不能直接让元素沿曲线移动，但可以配合其他变换属性间接模拟圆弧路径。下面给你几种实用的解决方案：

方案1：用旋转+平移模拟圆弧路径 #

原理是把目标元素放在一个容器里，通过旋转容器的同时，让元素沿着旋转半径方向平移，这样元素的运动轨迹就是一段圆弧。

修改你的代码示例：

.sun-half-wrapper { 
  position: relative;
  /* 设为正方形，方便计算旋转中心 */
  width: 600px;
  height: 600px;
}
.sun-half { 
  position: absolute; 
  width: 10.5%; 
  /* 把元素定位到容器中心，作为旋转的起点 */
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  animation: sun-orbit 5s linear infinite alternate;
}
.sun-half img { width: 100%; }

@keyframes sun-orbit {
  from {
    /* 初始位置：旋转0度，向外平移200px */
    transform: translate(-50%, -50%) rotate(0deg) translateX(200px) rotate(0deg);
  }
  to {
    /* 结束位置：旋转180度，保持平移距离，形成半圆轨迹 */
    transform: translate(-50%, -50%) rotate(180deg) translateX(200px) rotate(-180deg);
  }
}

这里的双层rotate是为了让元素始终保持正向，不会跟着容器旋转。如果不需要保持正向，可以去掉第二个rotate。

方案2：用CSS Offset Path（Motion Path）直接定义路径 #

这是CSS原生支持的路径动画方案，能直接指定任意曲线（比如圆弧、贝塞尔曲线），是最直观的方法。

示例代码：

.sun-half-wrapper { 
  position: relative;
  min-height: 400px;
}
.sun-half { 
  position: absolute; 
  width: 10.5%; 
  /* 使用offset-path定义圆弧路径 */
  offset-path: path('M 100 200 A 200 200 0 0 1 500 200');
  offset-distance: 0%;
  animation: sun-path 5s linear infinite alternate;
}
.sun-half img { width: 100%; }

@keyframes sun-path {
  from { offset-distance: 0%; }
  to { offset-distance: 100%; }
}

path()里的SVG路径语法可以定义任意曲线：M是起点，A是圆弧指令，你可以根据需要调整参数来改变路径形状。

方案3：用SVG的animateMotion元素 #

如果需要更复杂的路径或者更好的兼容性（比如旧版浏览器），可以用SVG的<animateMotion>来实现：

<svg width="600" height="400" xmlns="http://www.w3.org/2000/svg">
  <!-- 定义路径（可选，用来可视化轨迹） -->
  <path d="M 100 200 A 200 200 0 0 1 500 200" fill="none" stroke="#ccc"/>
  <!-- 移动的元素 -->
  <image href="http://www.freepngimg.com/download/sun/2-2-sun-high-quality-png.png" 
         width="63" height="63" >
    <animateMotion dur="5s" repeatCount="indefinite" alternate="true">
      <mpath href="#sun-path"/>
    </animateMotion>
  </image>
  <!-- 定义路径 -->
  <path id="sun-path" d="M 100 200 A 200 200 0 0 1 500 200" fill="none"/>
</svg>

这种方式完全基于SVG，不需要额外的CSS动画，适合复杂路径场景。

总结一下：

• transform-origin不能直接实现曲线移动，但可以配合旋转+平移做圆弧；
• 优先推荐用CSS Offset Path，语法简洁且原生支持；
• 复杂场景或兼容性需求可以用SVG的animateMotion。

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