emwaiblog

回転のアニメーションを実現するだけのシンプルなjQueryプラグインもあるようですが、それだけのためにプラグイン読み込むのもイマイチなので、もっと簡単にCSSのtransitionを使って回転させます。

2016.9.17 追記
動かないコードが載っていたので削除して加筆修正しました。

jQueryのanimate()では、アニメーションさせるCSSのプロパティにtransformやショートハンドのような、ピクセルにうまく変換できない値を指定してもうまく動作しません。

// ピクセルにうまく変換できない値はアニメーションできない
$('.font-size').animate( { font: '25px/1.5 sans-serif' }, 1000 );// ショートハンド
$('.rotate').animate( { transform: 'rotate(-45deg)' }, 1000 );// transform

// フォントサイズなどはピクセルに変換できる値を指定する
$('.font-size').animate( { fontSize: '250%' }, 1000 );

animate()で対処するならオプション（第二引数）で、フレームごとに呼び出されるstepメソッドに回転アニメーションを行うコールバックを自前するのがてっとり早いかと思います。

$('.rotate').animate( { opacity: 1 }, {
  duration: 1000,
  step: function (now) {
    $(this).css({ transform: 'rotate(' + now * -45 + 'deg)' })
  }
});

コールバックの第一引数には、アニメーションする値の増減に合わせて0から1までの数値が渡されてきます。ちょうど半分のタイミングで0.5になります。

.rotate { transform: rotate(0); transition: transform .5s; }
.rotate:hover { transform: rotate(180deg); }

#rotate { transform: rotate(180deg); transition: transform .5s; }
#rotate.appeared { transform: rotate(0); }

// ある程度スクロールされたら回転
var $window = $(window), $rotate = $('#rotate');
$window.on('scroll', function () {
  if ( ($window.scrollTop() + $window.height() * .8) < $rotate.offset().top) return;
  $rotate.addClass('appeared');
  $window.off('scroll', arguments.callee);
}).scroll();