CSS3のtransformでは
・rotate (回転)
・scale (拡大縮小)
・skew (歪ませる)
・translate (移動)
が定義されていますが、IE8以下はこれに対応していません。しかしながら、IE5.5から使えるMatrix Filterを使えば同等の効果を得ることができます。
ただし、これをそのまま使うと変形の起点(transform-origin)がCSS3のtransformと違うため座標にズレが出てしまいます。座標変換コードを書こうと思ったらもうやってる人がいたので紹介します。
jQuery 2D Transformation Plugin
45度回転させるコードは以下のように記述できます。
$('.example').transform({rotate: 45});
他のプロパティも同時に変更できます。
$('.example').transform({ rotate: '45deg', skew: ['10deg', '10deg'], scale: [1.5, 1.5], translate: ['20px', '20px'] }
jQueryのanimateもhookしているのでtransformのアニメーションも簡単に記述できます。
// 1秒で1回転させる $('.example').animate({rotate: '+=360deg'}、1000);
類似のjQueryプラグインにjquery-css-transformがありますが、現時点ではIE8以下で動きません。