[英]How do I rotate an element to 180 deg over 150 ms on hover?
On mouse over, I need to rotate an element counterclockwise 180˚ over an interval of 150ms, and then on mouse out I need to rotate the element counterclockwise back to the original 0˚ over 150ms. 鼠标悬停时,我需要在150ms的间隔内逆时针旋转一个元素180˚,然后在鼠标移出时我需要将元素逆时针旋转回原来的0˚超过150ms。
I am open to using CSS3, jQuery, and JavaScript. 我愿意使用CSS3,jQuery和JavaScript。
I use Chrome, but I also need to make it work for Firefox and Safari. 我使用Chrome,但我还需要让它适用于Firefox和Safari。 Not too worried about IE.
不太担心IE。
Use CSS3 transform
, transition
and Javascript to add/remove classes. 使用CSS3
transform
, transition
和Javascript来添加/删除类。
Demo: http://jsfiddle.net/ThinkingStiff/AEeWm/ 演示: http : //jsfiddle.net/ThinkingStiff/AEeWm/
HTML: HTML:
<div id="rotate">hover me</div>
CSS: 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;
}
Script: 脚本:
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 );
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.