我有以下代码，旨在旋转一个汉堡包图标90度时，它被点击，但它不工作，为什么？
null
var menu = document.getElementById("menu");
let rotate = function() {
document.getElementById("menu").style.transform = "rotate(90deg)";
};
menu.addEventListener("click", rotate);#menu {
text-decoration: none;
color: white;
font-size: 5vw;
color: #66fcf1;
cursor: default;
position: fixed;
margin-left: 2.5%;
}<a href="#" id="menu">☰</a>null
另见代码Pen:https://codepen.io/greatscams/pen/zeqryog
注意:它只工作一次。
您需要检查元素是否已经旋转。 它并不像只是旋转纸张那样发生。 Rotate(90deg)表示您正在分配属性，而不是实际旋转元素。
var rotated = false;
let rotate = function () {
if(rotated) {
document.getElementById("menu").style.transform = "rotate(0deg)";
rotated = false;
} else {
document.getElementById("menu").style.transform = "rotate(90deg)";
rotated = true;
}
};
当它被旋转90°时，它只旋转一次，而不是每次额外的90°。
为了在每次运行函数时保持旋转，您需要如下内容:
let deg = 0
let rotate = function () {
deg = deg + 90;
document.getElementById("menu").style.transform = `rotate(${deg}deg)`
};
因此，第一个调用将是rotot(90deg)，下一个调用是rotot(180deg)，等等
演示只工作一次，因为您要一次又一次地应用相同的转换函数。
元素的第一个状态是transform:none。 当第一次单击它时，您将它切换到Transform:rotate(90deg)。
转换相对于初始状态工作，而不是当前状态（它实际上是无状态的），因此上面的代码不会一次又一次地旋转它。
你能做的，取决于你想做什么，是:
切换动画（从旋转(0)到旋转(90deg)并返回）或
90deg乘以该数字。