Как повернуть изображение при прокрутке с помощью преобразования CSS?

Question

Я не уверен, как использовать jQuery, но имеет свойство CSS3: transform: rotate

его можно использовать вместе с jQuery?

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

JSFIDDLE

Answer 1

Попробуйте эту скрипку:

http://jsfiddle.net/kDSqB/

Это не 100% точное в разработке полного оборота, но я думаю, что ночь будет скрипка среды.

Кода здесь:

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 похож на мой исключением того, что величина поворота основан на положении прокрутки, где шахта просто продолжает вращаться, пока вы прокрутки, которая, как я понял вопрос.

Answer 4

Вот простой пример JQuery, проверьте модифицированную JSFiddle:

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

CSS будет обрабатывать ротацию> 360 и < 0 для меня, так что я Жду» t даже беспокоиться об этом и отрегулировать значение поворота на основе прокрутки по расстоянию. Я не беспокоился о том, чтобы попытаться объяснить полный поворот, чтобы он лучше протекал с прокруткой скорости и расстояния. Это решение зависит от 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 
    }); 
    }); 
})