Jquery 在css中通过悬停旋转

我的代码是关于悬停项目，它将围绕自身旋转

但我想知道它是如何敏感地悬停的，当我在项目上拖动鼠标时，它将以鼠标移动的速度旋转

它看起来像是在旋转轮子。

像这样

css

#square{
        width: 100px;
        height: 100px;
        background-color: magenta;
        margin: 50px 50px 50px 50px;
}
.rotate{
    -webkit-transition-duration: 5.0s;
    -moz-transition-duration: 5.0s;
    -o-transition-duration: 5.0s;
    transition-duration: 5.0s;        
    -webkit-transition-property: -webkit-transform;
    -moz-transition-property: -moz-transform;
    -o-transition-property: -o-transform;
    transition-property: transform;        
    overflow:hidden;    
}   
.rotate:hover{ 
    -webkit-transform:rotate(360deg);
    -moz-transform:rotate(360deg); 
    -o-transform:rotate(360deg);
}       

---

你不能用CSS来做这件事，你需要使用Javascript。Timothy Groote你能告诉我它在JS中调用了什么吗

#square {
        width: 100px;
        height: 100px;
        background-color: magenta;
        margin: 50px 50px 50px 50px;
    }
.rotate{
    -webkit-transition-duration: 5.0s;
    -moz-transition-duration: 5.0s;
    -o-transition-duration: 5.0s;
    transition-duration: 5.0s;

    -webkit-transition-property: -webkit-transform;
    -moz-transition-property: -moz-transform;
    -o-transition-property: -o-transform;
    transition-property: transform;

    overflow:hidden;

    }   
.rotate:hover   
{ 
  -webkit-transform: rotate(360deg); 
-moz-transform: rotate(360deg); 
-o-transform: rotate(360deg);
-ms-transform: rotate(360deg); 
}