我可以使用 css 和 jquery .rotate 旋转 div，但我不知道如何为它设置动画。
【问题讨论】：
标签： jquery
使用WebkitTransform / -moz-transform: rotate(Xdeg)。这在 IE 中不起作用，但 Matt 的 zachstronaut 解决方案在 IE 中也不起作用。
如果你也想支持 IE，你必须考虑使用canvas，就像我相信的那样Raphael does。
这是一个简单的 jQuery sn-p，它可以旋转 jQuery 对象中的元素。可以开始和停止旋转：
$(function() {
var $elie = $("img"), degree = 0, timer;
rotate();
function rotate() {
$elie.css({ WebkitTransform: 'rotate(' + degree + 'deg)'});
$elie.css({ '-moz-transform': 'rotate(' + degree + 'deg)'});
timer = setTimeout(function() {
++degree; rotate();
},5);
}
$("input").toggle(function() {
clearTimeout(timer);
}, function() {
rotate();
});
}); <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<input type="button" value=" Toggle Spin " />
<br/><br/><br/><br/>
<img src="http://i.imgur.com/ABktns.jpg" />【讨论】：
如果您正在为 iOS 设备或只是 webkit 进行设计，则无需任何 JS 即可：
CSS：
@-webkit-keyframes spin {
from {
-webkit-transform: rotate(0deg);
}
to {
-webkit-transform: rotate(360deg);
}
}
.wheel {
width:40px;
height:40px;
background:url(wheel.png);
-webkit-animation-name: spin;
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: linear;
-webkit-animation-duration: 3s;
}
这会在加载时触发动画。如果你想在悬停时触发它，它可能看起来像这样：
.wheel {
width:40px;
height:40px;
background:url(wheel.png);
}
.wheel:hover {
-webkit-animation-name: spin;
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: ease-in-out;
-webkit-animation-duration: 3s;
}
【讨论】：
我一直在用
$.fn.rotate = function(degrees, step, current) {
var self = $(this);
current = current || 0;
step = step || 5;
current += step;
self.css({
'-webkit-transform' : 'rotate(' + current + 'deg)',
'-moz-transform' : 'rotate(' + current + 'deg)',
'-ms-transform' : 'rotate(' + current + 'deg)',
'transform' : 'rotate(' + current + 'deg)'
});
if (current != degrees) {
setTimeout(function() {
self.rotate(degrees, step, current);
}, 5);
}
};
$(".r90").click(function() { $("span").rotate(90) });
$(".r0").click(function() { $("span").rotate(0, -5, 90) });span { display: inline-block }<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<span>potato</span>
<button class="r90">90 degrees</button>
<button class="r0">0 degrees</button>【讨论】：
如果你只想要一个 jQuery 选项，这将起作用：
$(el).stop().animate(
{rotation: 360},
{
duration: 500,
step: function(now, fx) {
$(this).css({"transform": "rotate("+now+"deg)"});
}
}
);
这适用于 jQuery 1.8，它会自动处理 CSS 前缀。 jQuery 不会为旋转设置动画，因此我将 transform:rotate() 放在自定义 step 函数中。它可能只能从 0 开始工作。
演示：http://jsfiddle.net/forresto/ShUgD/
IE9 和 Mobile Safari 4 支持 CSS 转换，但不支持 CSS 转换，所以我想出了这个简单的 shim，使用 Modernizr 功能测试：
if (Modernizr.csstransitions) {
$(el).css({
"transition": "all 500ms ease-in-out"
});
}
$(el).click(function(){
var rotateTo = 360;
if (Modernizr.csstransitions) {
$(el).css({"transform": "rotate("+rotateTo+"deg)"});
} else {
$(el).stop().animate(
{rotation: rotateTo},
{
duration: 500,
step: function(now, fx) {
$(this).css({"transform": "rotate("+now+"deg)"});
}
}
);
}
});
以上将在可用时使用 CSS 过渡。
【讨论】：
根据 Peter Ajtai 的回答，这是一个可以帮助其他人的小型 jquery 插件。我没有在 Opera 和 IE9 上进行测试，但应该也可以在这些浏览器上运行。
$.fn.rotate = function(until, step, initial, elt) {
var _until = (!until)?360:until;
var _step = (!step)?1:step;
var _initial = (!initial)?0:initial;
var _elt = (!elt)?$(this):elt;
var deg = _initial + _step;
var browser_prefixes = ['-webkit', '-moz', '-o', '-ms'];
for (var i=0, l=browser_prefixes.length; i<l; i++) {
var pfx = browser_prefixes[i];
_elt.css(pfx+'-transform', 'rotate('+deg+'deg)');
}
if (deg < _until) {
setTimeout(function() {
$(this).rotate(_until, _step, deg, _elt); //recursive call
}, 5);
}
};
$('.my-elt').rotate()
【讨论】：
var deg = (_initial < _step) ? _initial + _step : _initial - _step; 另外，Jquery 现在会自动做前缀。
$.animate()那样基于时间制作动画，因此旋转 180º 所需的时间是 90º 的两倍。
到目前为止，您仍然无法使用 jQuery 为旋转设置动画，但您可以使用 CSS3 动画，然后只需 添加并使用 jQuery 删除类以使动画发生。
HTML
<img src="http://puu.sh/csDxF/2246d616d8.png" width="30" height="30"/>
CSS3
img {
-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
-o-transform: rotate(-90deg);
-ms-transform: rotate(-90deg);
transform: rotate(-90deg);
transition-duration:0.4s;
}
.rotate {
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-o-transform: rotate(0deg);
-ms-transform: rotate(0deg);
transform: rotate(0deg);
transition-duration:0.4s;
}
jQuery
$(document).ready(function() {
$("img").mouseenter(function() {
$(this).addClass("rotate");
});
$("img").mouseleave(function() {
$(this).removeClass("rotate");
});
});
【讨论】：
这对我有用：
function animateRotate (object,fromDeg,toDeg,duration){
var dummy = $('<span style="margin-left:'+fromDeg+'px;">')
$(dummy).animate({
"margin-left":toDeg+"px"
},{
duration:duration,
step: function(now,fx){
$(object).css('transform','rotate(' + now + 'deg)');
}
});
};
【讨论】：
我需要旋转一个对象但有一个回调函数。受 John Kern 回答的启发，我创建了这个。
function animateRotate (object,fromDeg,toDeg,duration,callback){
var dummy = $('<span style="margin-left:'+fromDeg+'px;">')
$(dummy).animate({
"margin-left":toDeg+"px"
},
{
duration:duration,
step: function(now,fx){
$(object).css('transform','rotate(' + now + 'deg)');
if(now == toDeg){
if(typeof callback == "function"){
callback();
}
}
}
}
)};
这样做，您可以像这样简单地调用对象的旋转...（在我的情况下，我正在对已默认旋转到 270 度的显示三角形图标执行此操作，我正在将其旋转另一个90度到360度，1000毫秒。最后一个参数是动画结束后的回调。
animateRotate($(".disclosure_icon"),270,360,1000,function(){
alert('finished rotate');
});
【讨论】：