CSS-Transforms 还不能用 jQuery 制作动画。你可以这样做：
function AnimateRotate(angle) {
// caching the object for performance reasons
var $elem = $('#MyDiv2');
// we use a pseudo object for the animation
// (starts from `0` to `angle`), you can name it as you want
$({deg: 0}).animate({deg: angle}, {
duration: 2000,
step: function(now) {
// in the step-callback (that is fired each step of the animation),
// you can use the `now` paramter which contains the current
// animation-position (`0` up to `angle`)
$elem.css({
transform: 'rotate(' + now + 'deg)'
});
}
});
}
您可以在此处阅读有关步骤回调的更多信息：http: //api.jquery.com/animate/#step
http://jsfiddle.net/UB2XR/23/
而且，顺便说一句：您不需要使用 jQuery 1.7+ 为 css3 转换添加前缀
更新
您可以将其包装在一个 jQuery 插件中，以使您的生活更轻松：
$.fn.animateRotate = function(angle, duration, easing, complete) {
return this.each(function() {
var $elem = $(this);
$({deg: 0}).animate({deg: angle}, {
duration: duration,
easing: easing,
step: function(now) {
$elem.css({
transform: 'rotate(' + now + 'deg)'
});
},
complete: complete || $.noop
});
});
};
$('#MyDiv2').animateRotate(90);
http://jsbin.com/ofagog/2/edit
更新2
我对其进行了一些优化，以使easing,duration和complete无关紧要的顺序。
$.fn.animateRotate = function(angle, duration, easing, complete) {
var args = $.speed(duration, easing, complete);
var step = args.step;
return this.each(function(i, e) {
args.complete = $.proxy(args.complete, e);
args.step = function(now) {
$.style(e, 'transform', 'rotate(' + now + 'deg)');
if (step) return step.apply(e, arguments);
};
$({deg: 0}).animate({deg: angle}, args);
});
};
更新 2.1
感谢matteo，他注意到this完整的 -context存在问题callback。如果通过在每个节点上绑定回调来修复它。jQuery.proxy
我在Update 2之前已将该版本添加到代码中。
更新 2.2
如果您想做一些类似来回切换旋转的操作，这是一个可能的修改。我只是在函数中添加了一个 start 参数并替换了这一行：
$({deg: start}).animate({deg: angle}, args);
如果有人知道如何使所有用例更通用，无论他们是否想设置起始学位，请进行适当的编辑。
用法...很简单！
主要有两种方法可以达到预期的结果。但首先，让我们看一下论点：
jQuery.fn.animateRotate(angle, duration, easing, complete)
除了“角度”之外，它们都是可选的并且回退到默认的jQuery.fn.animate-properties：
duration: 400
easing: "swing"
complete: function () {}
第一
这种方式是短的，但是我们传递的参数越多看起来有点不清楚。
$(node).animateRotate(90);
$(node).animateRotate(90, function () {});
$(node).animateRotate(90, 1337, 'linear', function () {});
第二
如果参数超过三个，我更喜欢使用对象，所以我最喜欢这种语法：
$(node).animateRotate(90, {
duration: 1337,
easing: 'linear',
complete: function () {},
step: function () {}
});