ホバー上で150度以上180度に要素を回転させるにはどうすればよいですか？

Question

マウスを重ねると、150msの間隔で反時計回りに180度回転してから、マウスを離すと、要素を反時計回りに元の0度に150ms以上回転させる必要があります。

私はCSS3、jQuery、およびJavaScriptを使用しています。

私はChromeを使用していますが、FirefoxとSafariでも動作させる必要があります。あまりにもIEについて心配しないでください。

Answer 1

クラスを追加/削除するには、CSS3 transform,transitionおよびJavascriptを使用してください。

デモ：http://jsfiddle.net/ThinkingStiff/AEeWm/

HTML：

<div id="rotate">hover me</div> 

CSS：

#rotate { 
    border: 1px solid black; 
    height: 100px; 
    width: 100px; 
} 

.over { 
    transform: rotate(-180deg);    
    transition: transform 150ms ease; 
} 

.out { 
    transform: rotate(-360deg);    
    transition: transform 150ms ease; 
} 
​ 

スクリプト：

var rotate = document.getElementById('rotate'); 

rotate.addEventListener('mouseover', function() { 

    this.className = 'over'; 

}, false); 

rotate.addEventListener('mouseout', function() { 

    var rotate = this; 

    rotate.className = 'out'; 
    window.setTimeout(function() { rotate.className = '' }, 150); 

}, false); 

​