jquery.transform.js で CSS3 の transform をアニメーションさせる

要素を 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 プラグインです。