在鼠标悬停时,我需要在150ms的时间间隔内逆时针旋转180˚,然后在鼠标悬停的情况下,我需要将元素在150ms内逆时针旋转回原来的0˚。悬停时如何在150毫秒内将元素旋转180度?
我打算使用CSS3,jQuery和JavaScript。
我使用Chrome,但我也需要使它适用于Firefox和Safari。不要太担心IE。
在鼠标悬停时,我需要在150ms的时间间隔内逆时针旋转180˚,然后在鼠标悬停的情况下,我需要将元素在150ms内逆时针旋转回原来的0˚。悬停时如何在150毫秒内将元素旋转180度?
我打算使用CSS3,jQuery和JavaScript。
我使用Chrome,但我也需要使它适用于Firefox和Safari。不要太担心IE。
使用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) – qsheets 2012-02-25 04:46:12
看起来不错,但我需要它在鼠标和鼠标上旋转相同的方向(逆时针方向) 。 – chharvey 2012-02-25 04:49:02
@ TestSubject528491我想如果我先读你的问题会有所帮助。更新代码来处理这个问题。现在需要一些JavaScript。 – ThinkingStiff 2012-02-25 05:05:33
为什么150ms的?只要知道在使用浏览器的时候,你将永远不会有确切的标记,但是使用'setTimeout(functionCall(),150)'就是你需要的。 – vol7ron 2012-02-25 04:34:33
哪种类型的元素?只有图像? – 2012-02-25 04:34:52
那么只有当你想使用*实验* [transform属性](https://developer.mozilla.org/en/CSS/transform)和[transition属性](https://developer.mozilla)才会发生CSS3。 org/en/CSS/transition),它有时可能在Firefox中稍微慢一些(注意)。 – animuson 2012-02-25 04:35:46