如何在懸停時將元素旋轉150度超過150度？

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

​