要素を CSS3 の transform で移動・回転・拡大縮小などさせつつ、アニメーションもさせたい場合に便利な jQuery プラグインを紹介します。
jquery.transform.js
eenox/jQuery-3D-transformこのプラグインは指定の面倒な transform 属性を簡単に指定できるようにします。
transform 属性については transform－CSS3リファレンス を参照して下さい。
transform 属性は各種変換関数をスペース区切りで指定しなくてはならないので面倒でしたが、
普通の CSS の属性を扱うように transform 属性の関数を扱うことができます。
$(".transform").css({
"top": top1,
"left": left1,
"opacity": "0",
"rotate": rotate1 + "deg",
"scale": "2, 2"
}).animate({
"top": top2,
"left": left2,
"opacity": "1",
"rotate": rotate2 + "deg",
"scale": "1, 1"
}, 2000, 'swing');transform 属性を上記のように簡単に扱えるというだけで
アニメーションさせなくても使いたい jQuery プラグインです。