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

Posted 2023-05-08

【中文标题】如何在悬停时在 150 毫秒内将元素旋转到 180 度？

【英文标题】：How do I rotate an element to 180 deg over 150 ms on hover?

【发布时间】：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 就可以了。

【参考方案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 中使用。