jquery - CSS変換を使用してスクロールするときに画像を回転させる方法は?

Question

jQueryを使った使い方がよくわからないのですが、CSS3のプロパティとしてtransform:rotateがあります。

jQueryと一緒に使用できますか？

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

JSFIDDLE

Answer 1

簡単な jQuery の例を次に示します。変更された JSFiddle を確認してください。

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

CSS は 360 度以上の回転と 0 未満の回転を処理するので、スクロールした距離に基づいて回転値を調整することさえ気にしませんでした。スクロールした速度と距離でよりよく流れるように、完全な回転を考慮することについても心配しませんでした. このソリューションは jQuery に依存しますが、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
    });
  });
})

Answer 2

このように、jQuery は正しい css3 プレフィックスを使用する必要があります。 http://jsfiddle.net/g3k6h/2/

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