CSS3の2D 3D Transforms系モジュールをアニメーションさせるたくてもjQueryのanimate関数では対応していない。
別にanimateでtransforms系モジュールも対応させるためのプラグインをかませる必要がある。
とか。
で、今回はTransit.jsを利用してみる。
Transit.jsの利点は、Transforms系に限らず様々なアニメーションが用意されていて、animate関数にかわりtransition関数で定義するだけ。
$('.box').transition({ rotate: '45deg' });
こんな感じに。これで回転させることができる。
アニメーションさせずに単にcssの切り替えであれば
$('.box').css({ rotate: '45deg' });
とすることで実装でき、通常の.css()と同じように扱えてわかりやすい。
1点注意する点としては、現在のこころサポートするIEのバージョンは10+となっていることろ。
Win7 IE9で試したところrotateは動いたので、もしかしたら部分的にはOKなのかも。