Jquery 动画不是跨浏览器使用的；变换：旋转；

我正在制作一个动画来旋转滚动时的元素，只是让它在webkit中工作，但无法在其他浏览器中工作：

jQuery

var $cog = $('#cog'),
    $body = $(document.body),
    bodyHeight = $body.height();

$(window).scroll(function () {
    $cog.css({
        // this work
        'transform': 'rotate(' + ($body.scrollTop() / bodyHeight * 360) + 'deg)',

        // this not work
        '-moz-transform': 'rotate(' + ($body.scrollTop() / bodyHeight * 360) + 'deg)',
        '-ms-transform': 'rotate(' + ($body.scrollTop() / bodyHeight * 360) + 'deg)',
        '-o-transform': 'rotate(' + ($body.scrollTop() / bodyHeight * 360) + 'deg)'
    });
});

---

问题不在于转换。如果您尝试记录scrollTop值，您将看到firefox始终返回0，这是因为ff将滚动条附加到html，而不是正文。 以下是一个跨浏览器解决方案：

---

使用jQuery进行旋转有点棘手。。。我建议使用一些jQuery插件，例如。请注意，我对我的答案进行了一些优化。如果您已经复制了它，请考虑重做SO。您已经忘记了Safari（MAC）的“-WebKIT转换”。

var $cog = $('#cog'),
    $body = $('body'),
    bodyHeight = $body.height();

function getScrollTop(){
    if(typeof pageYOffset!= 'undefined'){
        //most browsers except IE before #9
        return pageYOffset;
    }
    else{
        var B= document.body; //IE 'quirks'
        var D= document.documentElement; //IE with doctype
        D= (D.clientHeight)? D: B;
        return D.scrollTop;
    }
}

$(window).scroll(function () {
    var scroll = getScrollTop();
    $cog.css({
        'transform': 'rotate(' + (scroll / bodyHeight * 360) + 'deg)',
        '-webkit-transform': 'rotate(' + (scroll / bodyHeight * 360) + 'deg)',
        '-moz-transform': 'rotate(' + (scroll / bodyHeight * 360) + 'deg)',
        '-ms-transform': 'rotate(' + (scroll / bodyHeight * 360) + 'deg)',
        '-o-transform:rotate': 'rotate(' + (scroll / bodyHeight * 360) + 'deg)'
    });
});