每次单击时旋转元素答案

【问题标题】：Rotate element on each click每次单击时旋转元素
【发布时间】：2019-12-23 15:50:37
【问题描述】：

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

我试过这个：

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

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

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

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

【问题讨论】：

你能显示你的代码吗？如果可能的话，在堆栈闪电战中
@Mamta 在这里：jsfiddle.net/8pue5nra 它只旋转一次。每次点击我都想旋转

标签： javascript html css css-transitions

【解决方案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
}

&lt;div id="box" onclick="rot(this)"&gt;&lt;/div&gt;

【讨论】：

谢谢，但count++ 可能希望低于*90？
计数被初始化为零。如果它在乘法以下增加，则第一次单击时不会旋转，因为角度将变为 0

【解决方案2】：

使用这个

const el = document.querySelector('#btn');
let degrees = 0;

el.addEventListener('click', function(){
  degrees += 90;
  this.style = `transform: rotate(${degrees}deg)`;
})

【讨论】：