如何制作围绕整圈旋转的css动画

Question

我的元素有时会旋转transform: rotate()。我想通过使用transition: transform 来平滑状态之间的转换。问题是rotate() 中的度数被硬编码为始终在-360 和+360 之间，所以在一个完整的圆度值从359 跳转到0 之后，动画会完整地返回而不是平滑的小动画向右。有什么方法可以“以最短的方式”进行过渡吗？

更新：角度是根据相机位置计算的，所以我现在不能使用无限度数。

澄清：我现在无法更改 js 代码，只能更改 CSS。所以此时只有[0, 360)度。 Demo 只模拟我所处的情况。

DEMO

o = document.querySelector("#arrow");
t = document.querySelector("#text");
angle = 0;
delta = 2;
FULL_TURN = 360;

document.querySelector("html").addEventListener("mousemove", (e) => {
  if (e.buttons === 1) {
    if (e.movementX > 0) {
      angle += delta;
    }
    if (e.movementX < 0) {
      angle -= delta;
    }
    angle %= FULL_TURN;
    o.style.transform = "rotate(" + angle + "deg)";
    t.innerText = angle + "deg";
  }
})

#arrow {
  font-size: 6em;
  width: 150px;
  text-align: center;
  user-select: none;
  transform-origin: 50% 60%;
  transition: transform 0.2s linear;
}

<header>Drag mouse left or right</header>
<span id="text">0deg</span>
<div id="arrow">↑</div>

Answer 1

您可以只计算“轮数”并将每轮添加 360 到您的角度：

value = angle + rounds*360;

查看这个工作示例：

o = document.querySelector("#arrow");
t = document.querySelector("#text");
angle = 0;
delta = 2;
FULL_TURN = 360;
rounds = 0;

document.querySelector("html").addEventListener("mousemove", (e)=>{
	if (e.buttons === 1) {
    if (e.movementX > 0) {
       angle += delta;
       if (angle >= 360) rounds++;
    }
    if (e.movementX < 0) {
       angle -= delta;
       if (angle <= -360) rounds--;
    }
    angle %= FULL_TURN;
    value = angle + rounds*360;
    o.style.transform = "rotate(" + value + "deg)";
    t.innerText = angle + "deg";
  }
})

#arrow {
  font-size: 10em;
  width: 150px;
  text-align: center;
  user-select: none;
  transform-origin: 50% 60%;
  transition: transform 0.2s linear;
}

body {
  padding: 10px;
}
header {
  margin-bottom: 10px;
}

<header>Drag mouse left or right</header>
<span id="text">0deg</span>
<div id="arrow">↑</div>