通過懸停在css中旋轉

Question

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

我的代碼是關於懸停該項目，它會圍繞自己旋轉。

但我想知道它是如何能夠敏感的懸停，就像當我拖動鼠標穿過物品時它將通過鼠標移動的速度如何旋轉。

它看起來像轉動輪子。

Answer 1

這樣

demo

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