クロスブラウザーな回転

jQueryを利用したクロスブラウザーな回転を作りました。
http://rtilabs.net/files/2010_09_04/rotate.html
jquery 1.4.4 以上だとエラーになってしまうのバグを教えてもらったので、対策バージョンを作成しました。
http://rtilabs.net/files/2011_02_03/rotate.html
IEで正しく動かなかったので修正しました。
http://rtilabs.net/files/2011_09_16/rotate.html

モダンなブラウザは css3 の transformで回転させています。
モダンではないIEはfilterでがんばって回転させています。

IEでの回転の計算式は http://p2b.jp/200912-CSS3-Transform-for-IE8 さんを参考にしています。
IEだと filter を利用した回転なので、IE5.5 から回るはずです。
IEすごいですね。

jqueryの拡張として作っているので、楽に使えると思います。
ついでに、$(elem).css({rotate: 10 }) みたいなシュガーとか $(elem).rotate(10) とかできます。甘々です。

animate() も作っているので、 簡単にぐるぐる回ります。

var deg = Math.floor( Math.random() * 1000 );
$('#target').animate({rotate: deg});

いろいろ甘すぎて糖分が気になる人向けに $(elem).css({transform: 'rotate(256deg)'}); とかもできるようにしています。
甘くないですね。

本当は、、、 border-radius とかも再現したかったんですが、、、

http://fetchak.com/ie-css3/ を途中まで移植したんですけど、
border-radiusして回転するととんでもないことになるんですよね、、、

完全に動作しない作成途中のバージョン
http://rtilabs.net/files/2010_09_04/rotate_bug.html

どうせ、9/15にIE9がでてここら辺すべて解決されるから、もう作らなくてもいいよね。
もう、ゴールしていいよね。。。

ソースコードはご自由にお使いください。

そのうち、jquery周りのソースの解説をしたいような。
最近技術ネタをまったく書いていなかったので反省中(´・ω・`)。