如何在悬停时将元素旋转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 );

?