マウスの位置に関連して画像を回転するにはどうすればよいですか？

Question

私はこの効果をしようとしています：http://metatroid.com/articlesページの上部にありますが、私はそれが彼らが与えたコードだけで回転することができません。

var img = $('.image'); 
if(img.length > 0){ 
    var offset = img.offset(); 
    function mouse(evt){ 
     var center_x = (offset.left) + (img.width()/2); 
     var center_y = (offset.top) + (img.height()/2); 
     var mouse_x = evt.pageX; var mouse_y = evt.pageY; 
     var radians = Math.atan2(mouse_x - center_x, mouse_y - center_y); 
     var degree = (radians * (180/Math.PI) * -1) + 90; 
     img.css('-moz-transform', 'rotate('+degree+'deg)'); 
     img.css('-webkit-transform', 'rotate('+degree+'deg)'); 
     img.css('-o-transform', 'rotate('+degree+'deg)'); 
     img.css('-ms-transform', 'rotate('+degree+'deg)'); 
     } 
$(document).mousemove(mouse); 
} 

私はこのコードを自分のjavascript関数の下に置き、イメージクラスを 'image'に変更しましたが、それでもまだ回転しません。

これに関連する他のjqueryまたはCSSのマークアップや、 に私に与えることができるヒントはありますか？私はまだこの種の新製品ですので、どんな助けも本当に感謝しています。ありがとうございました。

更新： 回転効果を得ることができましたが、右軸では回転しません。 ここに私が取り組んでいるもののURLがあります：

完全に動作するように軸/ピボットを移動するにはどうしたらいいですか？

Answer 1

問題は、関数のマウスを定義するだけで、img.lengthが0より大きい場合は、イベントハンドラを設定することです。このスクリプトは、本体がロードされる前に実行されるため、画像はありません。

修正 - イメージが定義されている場所の後で、スクリプトをドキュメントの本文に移動します。また、あなたのフィドルにはjQuery（mootools）は含まれていません。これらの2つのことを修正したら、それは機能します。