javascript - 每次点击旋转元素

Question

我试图在每次点击时旋转一个元素，如下所示:https://uimovement.com/design/addition-subtraction/

我试过这个:

element.style = '变换:旋转(90 度)'

但这只会添加一次样式。我想在每次点击时旋转它。我该怎么做？

我尝试添加一个类。但是当我点击一次时，类被添加，所以我不能再次添加。如果我删除类以在下次单击时启用旋转，则旋转发生在相反的方向。

编辑:https://jsfiddle.net/8pue5nra/

Answer 1

您可以创建一个函数，但每次单击都必须更改 Angular 。添加一个计数器并为每次点击将其乘以 90 以在每次点击时旋转它。

var count=0;
function rot(e){
count++;
var deg=count*90;
 e.style.transform = "rotate("+deg+"deg)";
}

#box
{
height:20px;
width:70px;
background-color:yellow
}

<div id="box" onclick="rot(this)"></div>