Jak obrócić element do 180 stopni na 150 ms po najechaniu kursorem?

Question

Po najechaniu myszką, muszę obrócić element przeciwnie do ruchu wskazówek zegara o 180˚ w odstępach równych 150ms, a następnie po wyjęciu myszy muszę obrócić element przeciwnie do ruchu wskazówek zegara z powrotem do pierwotnego 0˚ na 150ms.

Jestem otwarty na używanie CSS3, jQuery i JavaScript.

Używam przeglądarki Chrome, ale muszę ją również skonfigurować w przeglądarkach Firefox i Safari. Nie przejmuj się IE.

Answer 1

Użyj CSS3 transform, transition i Javascript, aby dodać/usunąć klasy.

Demo: 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; 
} 
​ 

Script:

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

​