ダウンロード

なにこれ？

CSSのtransformプロパティの値を素敵に扱うやつです。 .css()からtransformを扱う際に既存の値を完全に上書きしてしまう問題を解消します。

transform ？

transformはご存知CSS3で追加されたプロパティで、要素を変形(transform)させる事ができます。このプロパティ複数の値を取り得、例えば「小さめで傾ける」という指定の場合は

transform: scale(.8) rotate(-30deg);

のような指定になります。

詳しくはこのあたりとか。

jQuery + transformの問題点

jQueryでスタイルを操作する場合は .css()を利用します。

しかし、これはプロパティの名前と値が対にして利用します。つまりtransformに値を指定する場合はscale(.8) rotate(-30deg)と書く必要があるわけです。……当たり前ですね。

問題は、プロパティを設定するときではなく変更するときです。拡縮と回転を順に行うとき、どういうコードを書くべきでしょうか？

$elem.css('transform', 'scale(.8)');

// …

$elem.css('transform', 'rotate(-30deg)');
// -> transform: rotate(-30deg)

一度縮小して、しばらく後に傾けました。このコードの問題点は、二度目の .css()の時点でtransformの値が上書きされてしまう点です。つまり、上記を実行した後のtransformの値はscale(.8) rotate(-30deg)ではなく、rotate(-30deg)のみとなってしまいます。うーん、これはよろしくない。

ばらばらに扱えるように

というわけで、個別に扱えるようにしたのがjQuery.transform.jsです。jquery.transform.jsを読み込んでおくと、$elem.transform()というメソッドを利用出来るようになります。

// include: jquery.transform.js

$elem.transform('scale', '.8');

// …

$elem.transform('rotate', '-30deg');
// -> transform: scale(0.8) rotate(-30deg)

これなら過去に設定した、他のtransformのプロパティが消える事はありません。

ちなみに値を取得したり、上書きする事も出来ます。

// include: jquery.transform.js

$elem
  .transform('scale', '.8')
  .transform('rotate', '-30deg');

// …

$elem.transform('rotate', '-45deg');
// -> transform: scale(0.8) rotate(-45deg)

console.log($elem.transform('rotate'));  // => "-45deg"

今後

出来るようにする

  • transformの初期値を生かす
  • 単位を自動補完（pxとかdegとか）

出来るようにするつもりはない

  • matrix() 対応

道は険しいがやりたい

  • .css()から扱えるようにする
    • $elem.css('transform:rotate', '10deg')みたいな
  • .animate()対応
  • 内部で .data()を利用しているが、jQuery.cacheの方に情報を移行したい
  • 汎化; 複数値を取り得るプロパティ全般に対応する
    • background-imageとかbox-shadowとか
    • インターフェイスをどうするのか悩む……