在 mouseenter 上旋转 div 元素并在 mouseleave 上停止旋转

我搜索了很多，但我无法理解其实现（我是初学者）。所以请帮助我。

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

   </div>

javascript:

     var x=0;
     var y;
     function start(d)
    {
       if(d=='1')
          y=setInterval(function(){rotate()},10);
       else
       {
        clearInterval(y);
       }

   }
   function rotate()
   {
      x+=1;
      x=x%360;
      document.getElementById("card").setAttribute("style","-webkit- 
            transform:rotateX("+x+"deg)");
   }

在这里，我尝试在mouseenter上旋转div元素并在mouseleave上停止旋转，但它无法正常工作

您覆盖了卡片的原始样式，导致它消失。我建议你不要使用内联样式，这是一个不好的做法。你那里也有一个错误：height:100;width:100;。与标签属性不同，高度和宽度的 CSS 属性需要有单位，因此height:100px; width:100px;没关系。

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

这是代码的工作版本（请注意，我将旋转更改为 Z 轴，这样更有意义）：http://jsfiddle.net/34JKj/1/ http://jsfiddle.net/34JKj/1/

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