如何在悬停时在 150 毫秒内将元素旋转到 180 度？答案

【问题标题】：How do I rotate an element to 180 deg over 150 ms on hover?如何在悬停时在 150 毫秒内将元素旋转到 180 度？
【发布时间】：2012-03-15 12:33:33
【问题描述】：

鼠标悬停时，我需要在 150ms 的间隔内将元素逆时针旋转 180˚，然后在鼠标移出时，我需要将元素逆时针旋转回原来的 0˚，间隔 150ms。

我愿意使用 CSS3、jQuery 和 JavaScript。

我使用 Chrome，但我还需要使其适用于 Firefox 和 Safari。不太担心 IE。

【问题讨论】：

为什么是 150 毫秒？只需知道在使用浏览器时间时，您永远不会达到精确的标记，但使用 setTimeout(functionCall(),150) 将是您所需要的。
哪种类型的元素？只有图片？
只有当你想使用 experimental transform property 和 transition property 时，CSS3 才会发生，这在 Firefox 中有时会有点慢（请注意）。
查看this question 的最高答案，适用于 Chrome、Firefox 和 Safari，但不适用于 IE。
@vol7ron：我选择了 150 作为我可以识别的数字，如果需要，以后可能会更改。 @Julien Bourdon：任意块元素。 div 就可以了。

标签： javascript jquery css rotation transform

【解决方案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 );

【讨论】：

别忘了有些浏览器可能仍然需要浏览器前缀（-o、-moz、-ms 和 -webkit）
看起来不错，但我需要它在鼠标移入和移出时旋转相同的方向（逆时针）。
@TestSubject528491 我想如果我先阅读您的问题会有所帮助。更新代码以处理此问题。现在需要一些 javascript。
@TestSubject528491 刚刚纠正了演示中的一个错误。现在可以在 Firefox 中使用。