How to rotate an element 180 degrees for 150 ms on hover?

Question

When you hover the mouse, I need to rotate the element counterclockwise 180 ° with an interval of 150 ms, and then at the output of the mouse I need to turn the element counterclockwise back to the original 0˚ for more than 150 ms.

I am open to using CSS3, jQuery and JavaScript.

I use Chrome, but I also need to get it to work for Firefox and Safari. Not too worried about IE.

Answer 1

Use CSS3 transform , transition and Javascript to add / remove classes.

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