使用IE9支持的jQuery旋转div

我有一些div（基本上只是图像），当它们旋转360度时我会淡入。 一切都在所有主流浏览器中完美运行，而不是IE。

有效的CSS3代码

#box { width: 400px; height: 400px; display: inline-block; position: absolute; transform: rotate(0deg); -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -o-transform: rotate(0deg); -ms-transform: rotate(0deg); transition: all 0.8s 1s ease-in-out; -webkit-transition: all 0.8s 1s ease-in-out; -moz-transition: all 0.8s 1s ease-in-out; -o-transition: all 0.8s 1s ease-in-out; opacity:0; } #box.animate { transform: rotate(360deg); -webkit-transform: rotate(360deg); -moz-transform: rotate(360deg); -o-transform: rotate(360deg); -ms-transform: rotate(360deg); opacity:100; } 

现在我的jQuery代码是

 $("#box").addClass("animate"); 

不幸的是，那是关于我的jQuery知识的程度。 我知道我可以使用fadeIn()函数来处理不透明度设置，但可以使用什么来处理旋转部分？ 使用任何类型的插件实际上也是最后的手段。 我只需要它在IE9中工作。 如果它适用于Chrome，FF和Opera，那也很棒，但不是必须的。

是不是有类似的东西

 $("#box").animate(function() { $(this).fadeIn(1000).rotate(360); }); 

我觉得这是一个相当简单的解决方案，我只是想不出怎么做。 此外，我不知道该代码是否有效，我不是JS大师。

Answer 1

听起来像jquery的step函数要解决的问题。 它比使用插件轻一点，你应该能够自定义不透明度和旋转动画。 这是关于如何使用step函数的优秀文章。 从那篇文章推断我得出以下结论：

 function AnimateRotate(div_id, angle) { var $elem = $(div_id); $({deg: 0}).animate({deg: angle}, { duration: 1000, step: function(now) { $elem.css({ transform: 'rotate(' + now + 'deg)' }); } }); $({opacity: 0}).animate({opacity: angle}, { duration: 1000, step: function(now) { $elem.css({ opacity: now }); } }); } 

Answer 2

我能想到的唯一解决方案是CSS Sand paper.It是一个用于CSS转换的polyfill：

查看此链接： http ： //www.useragentman.com/blog/csssandpaper-a-css3-javascript-library/

 #box { -sand-transform: rotate(360deg); } 

这是你如何旋转它但你需要使用动画.animate（）步骤函数就像@dbratcher解决方案那样。