애니메이션을 사용하여 크로스 브라우저 아니다 "변환 : 회전",

Question

난 당신이 스크롤 할 때 요소를 회전 애니메이션을하고있어 그냥 웹킷에서 작동시킬 수 있지만 수없는 다른 브라우저에서 :

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)' 
    }); 
}); 

JSFIDDLE

Answer 1

문제는 변환되지 않습니다. scrollTop 값을 로깅하면 FireFox가 항상 0을 반환한다는 것을 알 수 있습니다. ff에는 본문이 아닌 html에 스크롤이 첨부되어 있기 때문입니다. 좀 jQuery 플러그인 같은 [jQuery를 회전]으로 (https://code.google를 사용하여 운영자 추천 것 ... jQuery로

http://jsfiddle.net/jonigiuro/kDSqB/9/

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)' 
    }); 
});