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

如何在悬停时将元素旋转150度超过150度？

1 个答案: