Transform / 回転・拡大縮小


2012.05.31 追記
ブラウザ判定がうまく動かなくなってたので、transform が使用できるかで判定するように変更しました。
機能の判定はブラウザのバージョンアップで変わってくので別の用途には使うべきじゃないね…

CSS3どころかCSSも普段あまりいじらないけど、回転・拡大縮小できる transform があるというコトなのでやってみる。
んでも、まだまだブラウザごとに実装が異なるらしく、jquery-css-transform.jsjquery-animate-css-rotate-scale.js っていう jQuery プラグイン使いましょうってのが多かったので、これを参考にしてみた。

CSS3では、transform: rotate(30deg) で要素を時計回りに30度回転、transform: scale(1.5) で要素を1.5倍とかいった指定が可能。んで、これが今んとこブラウザによって違ってて Chrome/Safari なら -webkit-transform、Firefox なら -moz-transform という具合。

これを jQuery で設定するには下記の感じ。JavaScript と CSS でパラメータ名が若干違うのに注意。

1
2
3
4
5
6
7
8
// Chrome / Safari (webkit) の場合
$('#target').css({ WebkitTransform: 'rotate(30deg) scale(1.5)' });
// firefox の場合
$('#target').css({ MozTransform: 'rotate(30deg) scale(1.5)' });
// Opera の場合
$('#target').css({ OTransform: 'rotate(30deg) scale(1.5)' });
// IE9 の場合
$('#target').css({ msTransform: 'rotate(30deg) scale(1.5)' });

rotate だけ、scale だけでもよいす。座標移動の translate もあるけど割愛。
これをブラウザ判定して使い分けます。jquery-css-transform.js だと transform, WebkitTransform, MozTransform,… と順にプロパティがあるかループで調べて判定してます。正式に tranform に対応したらそちらで処理するようにって事だと思う。(※2012.05.31追記 jquery-css-transform.jsのやり方がベンダープレフィックスが取れた時にも対応できるのでよりイイです)

パラメータの指定方法見ると、値に数値以外の文字もあるので jQuery の animate メソッドが使えないんよね。それで、jquery-animate-css-rotate-scale.js も別途用意されてる模様。

んで、試しに画像に適用したのが下記サンプルです。一応、プラグイン使わずにやってみた。
サンプル

もやもや – jsdo.it – share JavaScript, HTML5 and CSS

「Transform / 回転・拡大縮小」への1件のフィードバック

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です