CSS3どころかCSSも普段あまりいじらないけど、回転・拡大縮小できる transform があるというコトなのでやってみる。
んでも、まだまだブラウザごとに実装が異なるらしく、jquery-css-transform.js と jquery-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 に対応したらそちらで処理するようにって事だと思う。
パラメータの指定方法見ると、値に数値以外の文字もあるので jQuery の animate メソッドが使えないんよね。それで、jquery-animate-css-rotate-scale.js も別途用意されてる模様。
んで、試しに画像に適用したのが下記サンプルです。一応、プラグイン使わずにやってみた。
サンプル
もやもや – jsdo.it – share JavaScript, HTML5 and CSS
One Trackback
[...] こちらを参照 123img.zoom { zoom: 1.8; } [...]