【すぐに使える】要素をホバーした時にクルッと回転させる方法!

みなさんは、Webサイトを作成する際に「シンプルすぎるからもう少し印象が残るようようなサイトにしたい」や「おしゃれなサイトにしたい」など、現状のサイトに物足りないと感じたことはありますか?

要素に少しのアニメーションをつけることで、少しおしゃれで遊び心のあるWebサイトを作成することができ、今回紹介する方法は、おしゃれで遊び心のあるWebサイトを作成する為の1つの手段となります。

要素をホバーした時に回転させるにはCSSの:hoverを使用し、:hoverを指定したセレクタにtransformプロパティを使用しています。
また、クルッと回転させるにはtransformプロパティとtransitionプロパティを使用します。

今回は、要素をホバーした時にクルッと回転させる方法について以下の内容で解説していきます。

⚫︎ X座標を軸にクルっと回転させる場合
⚫︎ Y座標を軸にクルっと回転させる場合
⚫︎ Z座標を軸にクルっと回転させる場合

⚫︎ jQueryを使用して要素をホバーした時にクルッと回転させる方法
⚫︎ 実践的な使い方

要素をホバーした時にクルッと回転させるには

要素をホバーした時に回転させるにはCSSのtransformプロパティを使用する必要があり、またクルッと回転させるにはtransformプロパティとtransitionプロパティを使用する必要があります。

transformプロパティで回転する角度を、transitionプロパティで回転が完了するまでにかかる時間を指定します。

また、ホバーした時にアクションを起こさないといけないので:hoverの擬似クラスも使用します。

要素をホバーした時にクルッと回転させるサンプルコード

要素をホバーした時にクルッと回転させるサンプルコードを紹介します。

X座標を軸にクルっと回転させる場合

X座標を軸にクルっと回転させる場合は、transformプロパティにrotateXを指定します。

sample.html

style.css

出力結果

transformプロパティにrotateXを指定することで、X座標を軸に回転させています。
そのため、要素にマウスを持っていくと、縦に回転します。

Y座標を軸にクルっと回転させる場合

Y座標を軸にクルっと回転させる場合は、transformプロパティにrotateYを指定します。

sample.html

style.css

出力結果

transformプロパティにrotateYを指定することで、Y座標を軸に回転させています。
そのため、要素にマウスを持っていくと、横に回転します。

Z座標を軸にクルっと回転させる場合

Z座標を軸にクルっと回転させる場合はtransformプロパティにrotateZを指定します。

sample.html

style.css

出力結果

transformプロパティにrotateZを指定することで、X座標を軸に回転させています。
そのため、要素にマウスを持っていくと、右回転します。

jQueryを使用して要素をホバーした時にクルッと回転させる方法

先ほどまではCSSにプロパティを設定して要素の回転を行っていましたが、jQueryを使用することでも要素のホバー時の回転を実装することができます。

sample.html

style.css

index.js

出力結果

jQueryのhover()メソッドのパラメータのイベントハンドラにcss()メソッドを指定することで、jQueryで要素のホバー時の回転を実装しています。

サンプルコードではY座標を軸に回転していますが、もしX座標、Z座標を軸に回転させたい場合はrotateX、rotateZと指定してください。

実践的な使い方

ここでホバー時の回転の実践的な使い方を紹介していきます。
グローバルメニューの各メニューをホバーするとクルッと一回転するようになり少しおしゃれなメニューになります。

sample.html

style.css

index.js

出力結果

今回のポイント

:hoverやtransform、transitionでホバーした時にクルッと回転

⚫︎ 要素をホバーした時にクルッと回転させるには:hoverの擬似クラスにtransformプロパティとtransitionプロパティを使用する

⚫︎ transformプロパティには回転する角度を、transitionプロパティには回転が完了するまでにかかる時間で使用する

⚫︎ X座標を軸にクルっと回転させるには、transformプロパティにrotateXを指定する

⚫︎ Y座標を軸にクルっと回転させるには、transformプロパティにrotateYを指定する

⚫︎ Z座標を軸にクルっと回転させるには、transformプロパティにrotateZを指定する

⚫︎ jQueryでホバー時に要素をクルっと回転させるには、hover()のパラメータのイベントハンドラにcss()を使用する

Writer
壷井

壷井

株式会社flyhawkの壷井です。フライテックメディア事業部でのメディア運営・ライター業務なども担当。愛機はMac Book AirとThinkPad。好きな言語:swift、JS系(Node.js等)。好きなサーバー:AWS。受託開発やプログラミングスクールの運営をしております。ご気軽にお問い合わせください。

最新の案件情報

フリーランスエンジニアの案件探し