jQueryとCSS3で画像や要素を回転させる方法 – 回転のアニメーションを実現できるプラグイン【 jquery.transit 】
この記事は年前に書かれました。不適当な記述を含む場合がありますので、参考程度に留めてください。
どうもこんばんは。今回のtipsは【jQueryとCSS3で画像や要素を回転させる方法 – 回転のアニメーションを実現できるプラグイン jquery.transit 】になります。先日HTML5を使用した、HTML5とjQueryでRotate|スクロールに応じて画像を回転させる方法 – How to rotate the image by scrollという記事を書いたので、jQueryとCSS3で動作させる追加のメモになります。
jQueryで要素の回転
まずはjQueryを使ったCSS3の制御方法です。ここでは回転の中心点を制御する為、CSSにtransform-originを記述しています。また各プラウザごとに記述方法が異なるので注意してください。アニメーションは実行できません。
CSS – 回転の基準の設定
#rt{transform-origin:50% 50%;}
HTML
<img src="images/rotate.png" id="rt">
jQuery
$(‘#rt’).css({ WebkitTransform: ‘rotate(90deg)’ });
$(‘#rt’).css({ MozTransform: ‘rotate(90deg)’ });
$(‘#rt’).css({ OTransform: ‘rotate(90deg)’ });
$(‘#rt’).css({ msTransform: ‘rotate(90deg)’ });
jQueryで要素の回転 – アニメーションの実行
つぎにアニメーションを含んだ回転を実施します。これには【jquery.transit】という非常に便利なプラグインを使わせていただきます。
jquery.transit
使用方法はシンプル、下記の一行を記述するだけ。回転だけではなくCSS3の拡大、縮小や変形も実行可能です。
$(‘.box’).transition({ rotate: ’30deg’ });
以上になります。