Javascript 在MouseCenter上旋转div元素并在MouseLeave上停止旋转

我搜索了很多，但我无法理解实现（我是初学者）。所以请帮我解决这个问题

   <div id="card" style="height:100;width:100;background-color:blue" 
          onmouseenter="start('1')" onmouseleave="start('0')"  >

   </div>

---

在这里，我试图在MouseCenter上旋转div元素，并在MouseLeave上停止旋转，但它工作不正常

您覆盖了卡的原始样式，导致它消失。我建议你不要使用内联样式，这是一种糟糕的做法。你也有一个错误：

height:100；宽度：100。与标记属性不同，高度和宽度的CSS属性需要有一个单位，因此
height:100px；宽度：100px可以

document.getElementById("card")
    .style["-webkit-transform"] = "rotateZ(" + x + "deg)";

以下是代码的工作版本（请注意，我将旋转改为Z轴，这更有意义）：

另一个想法：您还可以使用CSS定义无限旋转动画，将其绑定到某个类，然后在鼠标进入/离开时将该类添加/删除到元素中。CSS的性能比JS好得多，并且已经成为一种标准，因此值得考虑。

HTML:

JS:

例如，代替i.e:
a+=a+b
你可以做：
a+=b
使用你可以做的相同语法
x%=360
，这与
x=x%360
相同。谢谢你的建议，我会在我的项目中更改它。我非常抱歉，实际上它们是setInterval和clearInterval。没问题，我应该已经解决了。我会删除我的答案，但我会先尝试修复你的代码。我对你的代码做了一点修改，请在此处查看你的代码的工作版本：（注意：你可能想使用
rotateZ
，如下所示：）@saimadan在10毫秒的时间内对循环中的一个元素进行反复检查。这是一个非常糟糕的想法，不客气，有关教程链接，请参见我之前的评论。这会让你开始。
document.getElementById("card")
    .style["-webkit-transform"] = "rotateZ(" + x + "deg)";

<div id="card"></div>

#card{
  height:100px;
  width:100px;
  background:blue;
}

var x=0;
var y;
var $card = document.getElementById("card");

function start(){
      y = setInterval(rotate,25);
}
function stop(){
   clearInterval(y);
}

function rotate(){
   $card.setAttribute(
     "style","-webkit-transform:rotate("+ (++x % 360) +"deg)"
   );
}

$card.addEventListener('mouseenter', start, false);
$card.addEventListener('mouseleave', stop, false);