Как повернуть элемент на 180 градусов в течение 150 мс при наведении? - PullRequest
Новая
       15

Как повернуть элемент на 180 градусов в течение 150 мс при наведении?

9 голосов
/ 25 февраля 2012

При наведении курсора мыши мне нужно повернуть элемент против часовой стрелки на 180˚ с интервалом в 150 мс, а затем при наведении мыши мне нужно повернуть элемент против часовой стрелки до исходного 0 to за 150 мс.Я открыт для использования CSS3, jQuery и JavaScript.

Я использую Chrome, но мне также нужно, чтобы он работал для Firefox и Safari.Не слишком беспокоюсь о IE.

1 Ответ

16 голосов
/ 25 февраля 2012

Используйте 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 );

​
...