How to rotate image when scrolling using CSS transform?

Question

I\'m not sure how to use using jQuery, but has a CSS3 property: transform: rotate

it could be used along with jQuery?

transform:rotate;
-ms-transform         


        

Answer 1

Here's a simple jQuery example, check the modified JSFiddle:

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

CSS will handle rotations > 360 and < 0 for me so I didn't even bother doing that and adjust the rotation value based on the distance scrolled. I didn't worry about trying to account for a full rotation either so that it better flowed with the speed and distance scrolled. This solution depends on jQuery but could easily be done without it.

$(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
    });
  });
})