How to rotate image when scrolling using CSS transform?

css, jquery

Solution

Try this fiddle:

http://jsfiddle.net/kDSqB/

It's not 100% accurate in working out full rotation, but I think that night be the fiddle environment.

The code here:

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

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

Problem

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:rotate; -webkit-transform:rotate; ``` JSFIDDLE

Original source