求助：JavaScript中transform rotate角度累加不重置为0的实现

核心思路是直接维护一个持续递增的角度变量，不对360取模，因为CSS的rotate()支持任意大小的角度值，浏览器会基于实际的累加值计算旋转方向，不会自动将角度重置到0-360范围内。

1. 持续平滑旋转（无反向回退） #

用requestAnimationFrame逐帧更新角度，保证旋转方向始终一致：

<div class="box"></div>
<button id="startBtn">开始旋转</button>

<style>
.box {
  width: 100px;
  height: 100px;
  background: #ff4444;
  margin: 50px;
}
</style>

<script>
let currentAngle = 0;
const box = document.querySelector('.box');
let animationId = null;

document.getElementById('startBtn').addEventListener('click', () => {
  if (animationId) return; // 防止重复启动
  
  function updateRotation() {
    currentAngle += 1; // 每次递增1度，可调整旋转速度
    box.style.transform = `rotate(${currentAngle}deg)`;
    animationId = requestAnimationFrame(updateRotation);
  }
  
  updateRotation();
});
</script>

2. 单次触发旋转（每次旋转固定角度） #

如果是点击或其他事件触发单次旋转，同样直接累加角度即可：

let currentAngle = 0;
const box = document.querySelector('.box');

box.addEventListener('click', () => {
  currentAngle += 90; // 每次点击顺时针转90度
  box.style.transform = `rotate(${currentAngle}deg)`;
});

为什么之前用transition会反向回退？ #

当你设置rotate(360deg)后再设rotate(0deg)，浏览器会计算两个值的最小差值，认为是逆时针旋转360度回到0。但如果直接设rotate(450deg)，浏览器会计算从360到450的差值（90度），从而执行顺时针旋转，和视觉上的0到90效果一致，但方向不会出错。

关键注意点 #

• 不要对角度做currentAngle %= 360的取模操作，保留原始累加值
• 避免依赖transition实现持续旋转，改用逐帧更新的方式控制方向

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