Come ruotare l’immagine quando si scorre usando la trasformazione CSS?

Non sono sicuro di come usare jQuery, ma ha una proprietà CSS3: transform: ruotare

potrebbe essere usato insieme a jQuery?

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

JSFIDDLE

Prova questo violino:

http://jsfiddle.net/kDSqB/

Non è preciso al 100% nell’elaborare la rotazione completa, ma penso che quella notte sia l’ambiente dei violini.

Il codice qui:

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

Ecco un semplice esempio di jQuery, controlla il JSFiddle modificato:

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

Il CSS gestirà le rotazioni> 360 e <0 per me quindi non mi sono nemmeno preoccupato di farlo e regolare il valore di rotazione in base alla distanza che scorre. Non mi sono preoccupato di cercare di rendere conto di una rotazione completa, in modo che potesse scorrere meglio con la velocità e la distanza. Questa soluzione dipende da jQuery ma potrebbe facilmente essere fatta senza di essa.

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

Ho iniziato con la soluzione OneOfOne e ho aggiunto animazioni. Avvia l’animazione sull’evento di scroll , terminalo con il 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); 

La risposta di jamesgauld è simile alla mia, tranne per il fatto che l’importo della rotazione è basato sulla posizione di scorrimento, in cui il mio continua a ruotare mentre si sta scorrendo, ed è così che ho capito la domanda.

Qualcosa del genere, jQuery dovrebbe usare il prefisso css3 corretto. http://jsfiddle.net/g3k6h/2/

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