JS设置style.transform时如何将90度旋转值与MenuRotate变量相加

问题背景 #

通过style.transform设置元素旋转效果时，需要将固定90度旋转值，和自定义方法getCurrentRotation获取到的元素当前旋转角度变量MenuRotate相加，作为最终的rotate参数，现有代码中rotate参数写死为90deg，无法实现累加旋转。

具体实现 #

你现有的getCurrentRotation方法返回值是0-360区间不带单位的纯角度数值，直接在设置transform属性时计算角度总和，再拼接deg单位即可，无需额外复杂处理。
仅需要修改OpenMenu函数中设置transform的对应行，修改后完整代码如下：

function OpenMenu(){
  const menuIcon = document.getElementById("Menu-Icon");
  // 获取元素当前旋转角度
  const MenuRotate = getCurrentRotation(menuIcon);
  document.getElementById("menu").style.margin = "450px";
  // 计算总旋转角度：当前角度 + 90度，拼接单位后赋值
  const finalRotate = MenuRotate + 90;
  menuIcon.style.transform = `rotate(${finalRotate}deg)`;
  var Menu1 = 1;
  //alert(MenuRotate);
}

原有兼容多浏览器的getCurrentRotation方法逻辑正常，不需要做任何修改。

可选优化 #

• 如果需要实现循环旋转效果（每点击4次旋转90度后回到初始位置），可以给总角度加360取余处理，避免角度值无限增大：

  const finalRotate = (MenuRotate + 90) % 360;
  

• 不要在transform属性中叠加多个rotate值，直接传入计算完成的总角度即可，否则后设置的transform会覆盖之前的变换规则，无法达到累加旋转的效果。

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