【CSS】画像やアイコンにマウスを合わせた際にくるっと45度ほど回転させる方法

WEBサイトはちょこっとした装飾や動きでユーザーの印象が大きく変わったりします。
今回はそのうちの一つ、アイコンや画像にマウスを合わせたら45度ほどくるっと回転する簡単なCSSの設定方法を紹介します。

アイコンや画像の素材を用意する

今回は下記サイトにて歯車のアイコンをダウンロードしました。
アイコン素材ダウンロードサイト「icooon-mono」

「icooon-mono」様はフリーで良質なアイコンがサイズ別、拡張子別で選べるので非常に重宝しています。ありがたや。

画像とCSSを設定する

画像を挿入して、特定のCSSクラスを付与します。
今回は下記のような感じにしました。

HTML

CSS

カーソルを当てても変化がないとわかりづらいのでポインタマークに変化するようにCSSを調整しました。

実装後の動き

下記の画像にマウスカーソルを合わせると歯車が傾きます。

たったこれだけのコードですが、動きのないページよりもユーザーの印象に残りやすくなりますよね。

ほんの些細なことですが、モノづくりは些細なこだわりの積み重ねで良いモノが作れるようになるので、どんなに忙しくても小さなこだわりを忘れないようにしていきたいですね。