jquery - 在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


#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); 
} 

作者:
...