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

鼠标悬停时，我需要在150ms的时间间隔内逆时针旋转一个元件180˚，然后鼠标悬停时，我需要在150ms的时间内逆时针旋转该元件回到原来的0˚

我愿意使用CSS3、jQuery和JavaScript

---

我使用Chrome，但我也需要让它适用于Firefox和Safari。不太担心IE。

使用CSS3

transform

、

transition

和Javascript添加/删除类

演示：

HTML:

将鼠标悬停在我身上

CSS:

#旋转{
边框：1px纯黑；
高度：100px；
宽度：100px；
}
.结束{
变换：旋转（-180度）；
转换：转换150ms；
}
.出去{
变换：旋转（-360度）；
转换：转换150ms；
}
​

脚本：

var rotate=document.getElementById（'rotate'）；
rotate.addEventListener（'mouseover'，函数（）{
this.className='over'；
}，假）；
rotate.addEventListener（'mouseout'，函数（）{
var rotate=这个；
rotate.className='out'；
setTimeout（函数（）{rotate.className='''}，150）；
}，假）；
​

为什么是150毫秒？只需知道，在使用浏览器时间时，您永远不会达到准确的目标，但使用

setTimeout（functionCall（），150）

将是您所需要的。哪种类型的元素？只有图像？CSS3只有在你想使用实验性的，而且在Firefox中有时会有点慢的情况下才会出现（请注意）。看看最高的答案，它在Chrome、Firefox和Safari中工作，但在IE中不起作用。@vol7ron：我选择了150作为一个数字，我可以识别，如果需要，可能会在以后更改@Julien Bourdon：任意块元素。一个

div

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