HTML旋转功能原理解析及马赛克瓷砖游戏旋转异常求助

浏览器处理CSS transform: rotate() 过渡时，会自动选择最短旋转路径。当瓷砖当前旋转角度为270°，你通过360%360将目标角度设为0°时，浏览器会认为逆时针转90°（路径更短）而非顺时针转90°，这就导致视觉上瓷砖出现反向大角度旋转的问题。

核心是不对设置到transform的旋转角度取模360°，直接使用累加的原始数值，让浏览器严格按照累加方向（顺时针）执行过渡：

修改rotateTile函数如下：

function rotateTile(index) {
  tileRotations[index] += 90;
  const tile = document.querySelector(`.tile[data-index="${index}"]`);
  // 直接用累加值，不取模360，确保过渡方向为顺时针
  tile.style.transform = `rotate(${tileRotations[index]}deg)`;
  checkMosaic();
}

checkMosaic函数的判断逻辑无需修改，rotation % 360 === 0依然能正确判断瓷砖是否归位（360%360=0，450%360=90，以此类推）。

可选优化：初始化时的transform可以简化为直接用初始旋转值（不影响功能）：

tile.style.transform = `rotate(${rotation}deg)`;

当瓷砖处于270°时，点击后累加为360°，transform设置为rotate(360deg)。此时浏览器会从270°顺时针旋转90°到360°（视觉上和0°完全一致），完全符合你“每次点击顺时针转90°”的需求。后续点击会继续累加为450°、540°等，对应视觉上的90°、180°，每次过渡都是顺时针90°，不会出现反向旋转的问题。

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