animation元素转换旋转
我将如何使用jQuery的.animate()旋转元素？ 我正在使用下面的行，这是目前正确的animation不透明度，但这是否支持CSS3转换？
$(element).animate({ opacity: 0.25, MozTransform: 'rotate(-' + -amount + 'deg)', transform: 'rotate(' + -amount + 'deg)' });
据我所知，基本的animation不能animation非数字的CSS属性。
我相信你可以使用一个步骤function和用户浏览器适当的css3转换完成。 CSS3转换对于覆盖所有浏览器（IE6中需要使用Matrixfilter）来说有点棘手。
编辑 ：这是一个在webkit浏览器（Chrome，Safari）中工作的例子： http : //jsfiddle.net/ryleyb/ERRmd/
如果你只想支持IE9，你可以使用transform而不是-webkit-transform ，否则-moz-transform将支持FireFox。
使用的技巧是animation我们不关心的CSS属性（ text-indent ），然后在step函数中使用它的值做旋转：
$('#foo').animate( .. step: function(now,fx) { $(this).css('-webkit-transform','rotate('+now+'deg)'); } ...
莱利的回答很好，但是我在文章中有文字。 为了旋转文本以及其他所有内容，我使用了border-spacing属性而不是文本缩进。
此外，要澄清一点，在元素的风格，设置您的初始值：
#foo { border-spacing: 0px; }
然后在animation块中，你的最终价值：
$('#foo').animate({ borderSpacing: -90 }, { step: function(now,fx) { $(this).css('transform','rotate('+now+'deg)'); }, duration:'slow' },'linear');
在我的情况下，它逆时针旋转90度。
这里是现场演示 。
在我看来，与CSS3 transition相比，jQuery的animate有点被滥用，它在任何2D或3D属性上执行这样的animation。 另外我担心，把它留给浏览器， 忘了叫做JavaScript的层可能会导致备用的CPU汁 ，特别是当你想要使用animation时。 因此，我喜欢在样式定义所在的位置使用animation，因为您使用JavaScript来定义function 。 您注入JavaScript的演示文稿越多，稍后将遇到的问题就越多。
所有你需要做的就是使用addClass到你想要animation的元素，在那里你设置一个具有CSS transition属性的类。 您只需“激活”animation ，该animation将保持在纯粹的表示层上 。
.js文件
// with jQuery $("#element").addClass("Animate"); // without jQuery library document.getElementById("element").className += "Animate";
人们可以很容易地删除一个类与jQuery ，或删除一个没有库的类 。
的CSS
#element{ color : white; } #element.Animate{ transition : .4s linear; color : red; /** * Not that ugly as the JavaScript approach. * Easy to maintain, the most portable solution. */ -webkit-transform : rotate(90deg); }
html的
<span id="element"> Text </span>
这对大多数使用情况来说是一个快速和方便的解决scheme
当我想要实现不同的样式（可选的CSS属性）时，我也使用它，并希望用全局.5sanimation即时更改样式。 我给BODY添加一个新的类，同时在这样的forms中有替代的CSS：
.js文件
$("BODY").addClass("Alternative");
的CSS
BODY.Alternative #element{ color : blue; transition : .5s linear; }
这样你就可以应用不同的animation样式，而不用加载不同的CSS文件。 你只涉及JavaScript来设置一个class 。
为了增加Ryley和atonyc的答案，你实际上并不需要使用真正的CSS属性，比如text-index或者border-spacing ，但是你可以指定一个假的CSS属性，比如rotation或者my-awesome-property 。 使用一些不会成为未来实际CSS属性的东西可能是一个好主意。
此外，有人问如何同时animation其他的东西。 这可以像平常一样完成，但要记住每个animation属性都要调用step函数，所以你必须检查你的属性，就像这样：
$('#foo').animate( { opacity: 0.5, width: "100px", height: "100px", myRotationProperty: 45 }, { step: function(now, tween) { if (tween.prop === "myRotationProperty") { $(this).css('-webkit-transform','rotate('+now+'deg)'); $(this).css('-moz-transform','rotate('+now+'deg)'); // add Opera, MS etc. variants $(this).css('transform','rotate('+now+'deg)'); } } });
（注：我无法在jQuery文档中find“Tween”对象的文档;从animation文档页面，有一个指向http://api.jquery.com/Types#Tween的链接，看起来并不存在，你可以在这里findGithub上Tween原型的代码）。;
只需使用CSS转换：
$(element).css( { transition: "transform 0.5s", transform: "rotate(" + amount + "deg)" } ); setTimeout( function() { $(element).css( { transition: "none" } ) }, 500 );
例如，我将animation的持续时间设置为0.5秒。
注意setTimeout在animation结束后（500毫秒）移除transition css属性，
为了便于阅读，我省略了供应商前缀。
这个解决scheme需要浏览器的过渡支持。
我偶然发现这个post，寻找在jQuery中使用CSS转换无限循环animation。 这个对我来说工作得很好。 我不知道它有多专业。
function progressAnim(e) { var ang = 0; setInterval(function () { ang += 3; e.css({'transition': 'all 0.01s linear', 'transform': 'rotate(' + ang + 'deg)'}); }, 10); }
使用示例：
var animated = $('#elem'); progressAnim(animated)
//this should allow you to replica an animation effect for any css property, even //properties //that transform animation jQuery plugins do not allow function twistMyElem(){ var ball = $('#form'); document.getElementById('form').style.zIndex = 1; ball.animate({ zIndex : 360},{ step: function(now,fx){ ball.css("transform","rotateY(" + now + "deg)"); },duration:3000 }, 'linear'); }
