ホバーで 360° 回転

解説

丸いアイコンボタンにマウスを乗せると、ぐるりと一回転する遊び心のある演出です。JavaScript は使わず、ホバー時に transform: rotate(360deg) を当て、transition でゆっくり回しています。例ではタイミング関数に少し弾むカーブを使い、最後に軽く揺り戻すような気持ちよさを出しています。回転と同時に背景色と文字色も切り替わるため、操作できることが直感的に伝わります。

合う使いどころ

• フッターやサイドの SNS リンクアイコンに、さりげない動きを足したいとき
• ロゴマークやお気に入りボタンなど、押すと楽しい小さなアイコンに

回転の速さは transition の秒数で、半回転や逆回転にしたい場合は角度の値（例では360deg）を変えて調整します。注意点として、SNS のブランドアイコンは Material Symbols などに含まれないため、各サービスの公式 SVG を使ってください。また動きが苦手な利用者に配慮し、prefers-reduced-motion が有効なときは回転を止め、色の変化だけにする実装にしておくと、より安心して使えます。

使用例・適したシーン

• ナビゲーションのインタラクティブ装飾
• ギャラリーのホバーリビール
• サービスカードの強調