使用IE9支持的jQuery旋转div

Question

我有一些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函数要解决的问题。 它比使用插件轻一点，你应该能够自定义不透明度和旋转动画。 这是关于如何使用阶梯函数的优秀文章。 根据那篇文章推断，我想出了以下内容：

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解决方案一样。