动画元素变换旋转 [英] Animate element transform rotate

问题描述

如何使用jQuery的.animate()旋转元素?我正在使用下面的代码行，该代码行目前可以正确地对不透明度进行动画处理，但这是否支持CSS3转换?

How would I rotate an element with a jQuery's .animate()? I'm using the line below, which is currently animating the opacity correctly, but does this support CSS3 transforms?

$(element).animate({
   opacity: 0.25,
   MozTransform: 'rotate(-' + -amount + 'deg)',
   transform: 'rotate(' + -amount + 'deg)'
});

推荐答案

据我所知，基本动画无法为非数字CSS属性设置动画.

As far as I know, basic animates can't animate non-numeric CSS properties.

我相信您可以使用 step 函数并为用户使用适当的css3转换来完成此操作浏览器. CSS3转换要覆盖您的所有浏览器都有些棘手(例如，IE6您需要使用Matrix过滤器).

I believe you could get this done using a step function and the appropriate css3 transform for the users browser. CSS3 transform is a bit tricky to cover all your browsers in (IE6 you need to use the Matrix filter, for instance).

编辑:以下是在Webkit浏览器(Chrome，Safari)中运行的示例: http://jsfiddle.net/ryleyb/ERRmd/

EDIT: here's an example that works in webkit browsers (Chrome, Safari): http://jsfiddle.net/ryleyb/ERRmd/

如果只想支持IE9，则可以使用transform代替-webkit-transform，否则-moz-transform将支持FireFox.

If you wanted to support IE9 only, you could use transform instead of -webkit-transform, or -moz-transform would support FireFox.

使用的技巧是为我们不关心的CSS属性设置动画(text-indent)，然后在step函数中使用其值进行旋转:

The trick used is to animate a CSS property we don't care about (text-indent) and then use its value in a step function to do the rotation:

$('#foo').animate(
..
step: function(now,fx) {
  $(this).css('-webkit-transform','rotate('+now+'deg)'); 
}
...

这篇关于动画元素变换旋转的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！