jQueryとCSS3で画像や要素を回転させる方法 – 回転のアニメーションを実現できるプラグイン【 jquery.transit 】

この記事は4年前に書かれました。不適当な記述を含む場合がありますので、参考程度に留めてください。

どうもこんばんは。今回の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’ });

以上になります。