【4行でOK!】CSSでホバーした要素をクルクルと回転させる方法!

(この記事は2022年5月23日に投稿されました。)

「もう少しユーザに印象が残るようなサイトにしたい」
「アニメーションをつけておしゃれなサイトにしたい」

みなさんはWebサイトを作成する際に上記のように思ったことはありませんか?

マウスのホバー時に要素を回転させることで、少しおしゃれで遊び心のあるWebサイトへと変身することができます。

例えば、マウスの操作なしで要素が勝手に動き出すと「なんだこのサイトは?」って思いますよね?

つまり、アニメーションをつけると遊び心があり、内観だけでなく外観でもユーザーに印象を残しやすくなります。

もし、自分が作成したサイトがシンプルで面白みがないなと思う場合は簡単なアニメーションからで良いのでつけてみましょう。

今回はCSSを使ってホバー時に要素をクルクルと回転させる方法について紹介していきます。

ホバーした要素をクルクル回転させるアニメーションはても簡単なアニメーションの1つです。

この記事はこんな方におすすめ
・サイトにおしゃれなアニメーションをつけたい人




ホバー時に要素をクルクルと回転させる方法

ホバー時に要素をクルクル回転させるにはHTMLファイルとCSSファイルを用意し、それぞれのコードを追記していきます。

HTMLの書き方

まずは、HTMLの書き方です。

HTMLは下記のように記述します。

⚫︎ sample.html

head内にCSSファイルを紐づけるためのコードを追記します。

そして、div要素のクラスに「spin」を追記します。

CSSの書き方

続いて、CSSの書き方です。

CSSでは、下記のように記述します。

⚫︎ sample.css

「transform」は要素の形や配置を変更することができるプロパティであり、「rotate」を使用することで、どの向きにどのくらい回転するかを設定することができます。

また、「transition」は特定のプロパティが変化したときに、アニメーションのように動かすことができるプロパティとなります。

つまり、transitionで要素を回転させ、transitionで回転する時間を設定することでスムーズな回転を実行することができます。

:hoverは、ホバーした(マウスを重ねた)要素を対象にすることができる擬似クラスとなります。

つまり、:hoverをつけることでホバー時をCSSの対象にすることが可能となります。

今回使用するプロパティ
transform
要素の形や配置を変更することができるプロパティ
transition
特定のプロパティが変化したときに、その変化をアニメーションのように動かすことができるプロパティ
今回使用する擬似クラス
:hover
ホバーした(マウスを重ねた)要素を対象にすることができるセレクタ

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

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

ここでは、下記の3つのパターンについてのコードとなります。

  1. X座標を軸に要素をクルクルと回転させる場合(縦回転)
  2. Y座標を軸に要素をクルクルと回転させる場合(横回転)
  3. Z座標を軸に要素をクルクルと回転させる場合(左右回転)

X軸を基準に要素をクルクルと回転させる場合(縦回転)

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

⚫︎ sample.html

⚫︎ sample.css

⚫︎ 実行結果

X軸を基準に要素を回転させてみた結果

transformプロパティにrotateXを指定することで、X座標を軸に縦回転させています。

また、transitionプロパティで1sを指定しているため、1秒かけてアニメーションが行われています。

Y軸を基準に要素をクルクルと回転させる場合(横回転)

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

⚫︎ sample.html

⚫︎ sample.css

⚫︎ 実行結果

Y軸を基準に要素を回転させてみた結果

transformプロパティにrotateYを指定することで、Y座標を軸に横回転させています。

また、transitionプロパティで1sを指定しているため、1秒かけてアニメーションが行われています。

Z軸を基準に要素をクルクルと回転させる場合(左右回転)

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

⚫︎ sample.html

⚫︎ sample.css

⚫︎ 実行結果

Z軸を基準に要素を回転させてみた結果

transformプロパティにrotateZを指定することで、Z座標を軸に右回転させています。

また、transitionプロパティで1sを指定しているため、1秒かけてアニメーションが行われています。

jQueryとCSSを使ってホバー時に要素をクルクルと回転させる方法

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

⚫︎ sample.html

⚫︎ sample.css

⚫︎ sample.js

⚫︎ 実行結果

jQueryとCSSを使ってホバー時に要素を回転させてみた結果

jQueryのhover()を使用することで、マウスのホバー時にイベントが発生するようにしています。

そのため、addClass()を使用することで、回転するクラスを付与し、removeClass()を使用することで、元に戻るクラスを付与しています。

Sossy

もしX座標、Z座標を軸に回転させたい場合はonクラスとoffクラスのtransformをrotateXやrotateZと指定するとOKです。

実際のサイトでホバー時に要素をクルクルと回転させてみた

実際のサイトでホバー時に要素をクルクルと回転させてみたので紹介していきます。

今回は、下記の画像にあるグローバルメニューにマウスを持っていくと回転し、アレンジとして回転後には名前が変わるよう設定してみます。

デモサイトのトップページ画面

⚫︎ header.php

⚫︎ footer.php

⚫︎ style.css

⚫︎ index.js

⚫︎ 実行結果

グローバルメニューにホバー時の要素を回転させるアニメーションをつけてみた結果

グローバルメニューにホバーすると、メニューがクルクルと回転しています。

また、jQueryのhtml()を使用することで、回転後には名前が変化するようにしています。

まとめ

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

⚫︎ transformプロパティにrotateXを指定するとX座標を軸に要素がクルクルと回転する

⚫︎transformプロパティにrotateYを指定するとY座標を軸に要素がクルクルと回転する

⚫︎ transformプロパティにrotateZを指定すると、Z座標を軸に要素がクルクルと回転する

⚫︎ jQueryでホバー時に要素をクルクルと回転させるには、hover()とaddClass()、removeClass()を使用する
(回転するクラスをaddClass()で取り付け、removeClass()で外す)

コメントを残す

メールアドレスが公開されることはありません。