如何解决CSS旋转动画使用固定角度点时重置为0°的问题？

我设计了一个菜单，通过中央光标指向当前选中的菜单项。用JavaScript实现时，预先定义各按钮对应的固定角度，计算顺时针/逆时针中角度变化更小的路径旋转光标，但在222°与115°间切换时，光标不走最短路径，反而反向绕圈。

排查后发现，问题根源是光标会先重置到0°，绕完一圈再转到目标角度，导致方向错误。我刚接触Web开发，查资料没找到相似案例，希望光标能直接走最短路径转到目标角度，无需绕圈。

原实现代码 #

JavaScript #

const angles = { // 各按钮对应的固定角度
  button1: 290,
  button2: 222,
  button3: 115,
  button4: 75,
  button5: 0
}

var cursor = document.getElementById("cursor")
var currentAngle = 0;

$(".button").hover(function() { // 鼠标悬停按钮时触发
  let next_angle = angles[this.id];
  let turn_radius = 0;
  let clockwise = (Math.abs(next_angle - currentAngle) < 180) ? true : false; // 判断最短路径方向

  if (clockwise) {
    turn_radius = (next_angle - currentAngle);
  } else {
    turn_radius = "-" + (360 - Math.abs(next_angle - currentAngle));
  }
  cursor.style.rotate = turn_radius + "deg";
});

CSS #

.button {
  display: block;
  z-index: -1;
  position: absolute;
  border: 4px solid;
  border-radius: 45%;
  text-decoration: none;
  text-align: center;
  font: bold;
  font-size: medium;
  background-color: white;
}

#button1 {
  width: 30%;
  height: 15%;
  top: 40%;
  left: 15%;
  transform: translate(-40%, -15%);
}

#button2 {
  width: 30%;
  height: 15%;
  top: 75%;
  left: 25%;
  transform: translate(-75%, -25%);
}

#button3 {
  width: 30%;
  height: 15%;
  top: 80%;
  left: 85%;
  transform: translate(-80%, -85%);
}

#button4 {
  width: 30%;
  height: 15%;
  top: 40%;
  left: 75%;
  transform: translate(-40%, -75%);
}

#button5 {
  width: 30%;
  height: 15%;
  top: 10%;
  left: 35%;
  transform: translate(-10%, -35%);
}

#cursor {
  width: 100px;
  height: 100px;
  position: absolute;
  top: 40%;
  left: 40%;
  transition: all 0.25s ease-out;
  -moz-transition: all 0.25s ease-out;
  -ms-transition: all 0.25s ease-out;
  -o-transition: all 0.25s ease-out;
  -webkit-transition: all 0.25s ease-out;
}

HTML #

<!DOCTYPE html>
<html>
<head>
  <title>Main Menu</title>
  <link rel="stylesheet" href="index.css">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
</head>
<body style="background-color: white;">
  <img src="https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Ftse1.mm.bing.net%2Fth%3Fid%3DOIP.sVcpgS1I_6kEJvuOecuuUgHaHa%26pid%3DApi&f=1&ipt=00bebfbdf248c4677c3ad5a9f6910bdfbd564aa401d634006f527981942f13d6&ipo=images" id="cursor">

  <a href="#" id="button1" class="button">Button1</a>
  <a href="#" id="button2" class="button">Button2</a>
  <a href="#" id="button3" class="button">Button3</a>
  <a href="#" id="button4" class="button">Button4</a>
  <a href="#" id="button5" class="button">Button5</a>

  <script src="menu_select.js"></script>
</body>
</html>

解决方案 #

核心问题分析 #

原代码使用cursor.style.rotate设置相对旋转值，但CSS的rotate属性每次都是基于元素初始状态（0°）计算，而非上次旋转后的状态，导致大角度切换时出现绕圈问题。需要改为绝对角度控制，并正确计算最短路径的累计角度。

修改后的代码 #

JavaScript

const angles = {
  button1: 290,
  button2: 222,
  button3: 115,
  button4: 75,
  button5: 0
}

const cursor = document.getElementById("cursor");
let currentAngle = 0;

$(".button").hover(function() {
  const nextAngle = angles[this.id];
  
  // 计算最短路径的角度差值，调整到-180~180区间
  let angleDiff = nextAngle - currentAngle;
  angleDiff = (angleDiff + 360) % 360;
  if (angleDiff > 180) {
    angleDiff -= 360;
  }
  
  // 更新累计绝对角度
  currentAngle += angleDiff;
  
  // 设置绝对旋转角度
  cursor.style.transform = `rotate(${currentAngle}deg)`;
});

CSS（仅修改过渡属性）

#cursor {
  width: 100px;
  height: 100px;
  position: absolute;
  top: 40%;
  left: 40%;
  transition: transform 0.25s ease-out;
  -moz-transition: transform 0.25s ease-out;
  -ms-transition: transform 0.25s ease-out;
  -o-transition: transform 0.25s ease-out;
  -webkit-transition: transform 0.25s ease-out;
}

关键改动说明 #

1. 绝对角度控制：直接设置transform: rotate(Xdeg)，X为累计的绝对角度（允许大于360或小于0，CSS会自动处理旋转状态）。
2. 最短路径计算：通过角度差值取模和区间调整，确保每次旋转的角度差在-180~180之间，强制走最短路径。
3. 更新角度基准：每次旋转后更新currentAngle，保证下次计算的基准是上次旋转后的状态。
4. 优化过渡性能：将transition: all改为transition: transform，减少不必要的过渡触发。

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