CSS를 사용하여 스크롤 할 때 이미지를 회전하는 방법은 무엇입니까?

Question

jQuery를 사용하는 방법을 모르겠지만 CSS3 속성이 있습니다. 변환 : rotate

jQuery와 함께 사용할 수 있습니까?

transform:rotate; 
-ms-transform:rotate; 
-webkit-transform:rotate; 

JSFIDDLE

Answer 1

이 바이올린을보십시오. 여기

코드 :

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

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

Answer 2

이런 식으로 뭔가가 jQuery를 올바른 CSS3 접두어를 사용한다. http://jsfiddle.net/g3k6h/2/

$(function() { 
    $('.gear').click(function() { 
     $(this).css('transform', 'rotate(30deg)'); 
    }); 
}); 

Answer 3

나는 OneOfOne의 솔루션으로 시작하고 여기에 애니메이션을 추가했다. scroll 이벤트에서 애니메이션을 시작하고 mouseup으로 끝냅니다. http://jsfiddle.net/g3k6h/4/

var rotation = 0; 
var interval; 
var gear = $('.gear'); 

function animate() { 
    gear.css('transform', 'rotate('+rotation+'deg)'); 
    rotation += 10; 
    rotation %= 360; 
} 
function startAnim() { 
    if (!interval) { 
     interval = setInterval(animate, 100); 
    }   
}  
function stopAnim() { 
    clearInterval(interval); 
    interval = null; 
}  
$(document).scroll(startAnim).mouseup(stopAnim); 

jamesgauld의 대답은 회 전량은 내가 질문을 이해하는 방법을 당신이 스크롤하는 동안 내 그냥 회전 계속 스크롤 위치에 기반 하였다는 점을 제외하고 광산과 유사하다.

http://jsfiddle.net/kDSqB/

그것은 전체 회전 운동에서 100 % 정확,하지만 난 그날 밤 바이올린 환경이 될 생각 :

Answer 4

다음은 간단한 jQuery를 예제의은 수정 된 JSFiddle을 확인하십시오

http://jsfiddle.net/g3k6h/5/

CSS는 회전> 360과 나를 위해 < 0 그래서 didn를 처리합니다 ' 심지어 그것을하는 것을 괴롭 히고 스크롤 된 거리에 따라 회전 값을 조정하십시오. 나는 속도와 거리를 스크롤하면서 더 잘 흘러가도록 풀 회전을 고려하는 것에 대해 걱정하지 않았습니다. 이 솔루션은 jQuery에 의존하지만이를 사용하지 않고도 쉽게 수행 할 수 있습니다.

$(function() { 
    var rotation = 0, 
    scrollLoc = $(document).scrollTop(); 
    $(window).scroll(function() { 
    var newLoc = $(document).scrollTop(); 
    var diff = scrollLoc - newLoc; 
    rotation += diff, scrollLoc = newLoc; 
    var rotationStr = "rotate(" + rotation + "deg)"; 
    $(".gear").css({ 
     "-webkit-transform": rotationStr, 
     "-moz-transform": rotationStr, 
     "transform": rotationStr 
    }); 
    }); 
})