javascript - 每次单击时旋转元素

Question

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

我试过这个：

element.style = 'tranform: rotate(90deg)'

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

我尝试添加一个类。但是当我单击一次时，该类被添加，因此我无法再次添加。如果我删除类以在下次单击时启用旋转，则旋转发生在相反方向。

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

标签： javascripthtmlcsscss-transitions

Answer 1

您可以创建一个函数，并且每次单击都必须更改角度。添加一个计数器并将其乘以每次单击的 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>