能否实现CSS rotate的线性点到点过渡动画（非圆弧路径）？

直接用CSS rotate 属性做不到这种直线运动——因为旋转本质就是围绕中心点做圆弧轨迹运动。要实现元素上的点沿直线从起点到终点平滑移动，得换个思路，用位移变换（translate）结合动态位置计算来模拟。

核心思路 #

元素上的点从位置1到位置2的直线运动，本质是元素整体做平移+角度调整，但平移轨迹是直线。我们可以通过计算起点与终点的坐标差，用CSS变量结合过渡或关键帧来控制位移的线性插值，同时同步调整元素角度（如果需要保持元素朝向与终点一致）。

基础实现示例 #

假设元素初始在左上角，要移动到右下角，同时让元素最终朝向与运动方向一致：

.box {
  width: 50px;
  height: 50px;
  background: #f00;
  position: absolute;
  /* 用CSS变量存储起点、终点坐标 */
  --start-x: 0;
  --start-y: 0;
  --end-x: 300px;
  --end-y: 300px;
  /* 根据坐标差计算需要旋转的角度 */
  --rotate-angle: calc(atan2(var(--end-y) - var(--start-y), var(--end-x) - var(--start-x)) * 180 / 3.14159);
  transition: transform 1s linear;
}

.box.move {
  transform: 
    translate(calc(var(--end-x) - var(--start-x)), calc(var(--end-y) - var(--start-y)))
    rotate(var(--rotate-angle));
}

这里元素的位移是直线（translate 的线性过渡），同时通过坐标差计算出旋转角度，让元素最终朝向与运动方向匹配，视觉上就像元素从起点“直线到位”，而非沿圆弧旋转。

关键帧精细控制 #

如果需要更精准地定义中间状态，可以用 @keyframes 手动指定关键帧：

@keyframes linearMove {
  0% {
    transform: translate(0, 0) rotate(0deg);
  }
  100% {
    transform: translate(300px, 300px) rotate(45deg);
  }
}

.box {
  animation: linearMove 1s linear forwards;
}

这种方式下，元素的位移全程是直线，旋转同步完成，元素上的每个点都会沿直线从起点移动到终点。

总结 #

• 无法直接通过 rotate 过渡实现直线轨迹，因为旋转的本质就是圆弧运动。
• 用 translate 线性过渡位移，结合同步的角度调整，就能模拟出“点到点直线移动+旋转到位”的效果，满足平滑动画的需求。

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