ホバー時の画像回転

ホバー時の画像回転などの動的な動作を Web ページに組み込むと、ユーザー エンゲージメントを高めることができます。円形の境界線を持つ画像に CSS を使用してこの効果を実現するには、次の手順に従います。

1. rotate() による CSS3 トランジション

CSS3 トランジションを利用して、ホバー時に画像をスムーズに回転させます。トランジション プロパティは、アニメーションの継続時間とイージング関数を定義します。この場合、遷移時間を 0.7 秒に設定し、イーズインアウト イージング関数を指定します。

img {
  transition: transform .7s ease-in-out;
}

2.ホバー変換

ホバー上で画像を回転するには、rotate() 関数でtransformプロパティを使用して、目的の回転角度を設定します。この例では、画像を 360 度回転します。

img:hover {
  transform: rotate(360deg);
}

3. HTML の実装

HTML コード内に、適切なソースとサイズの画像要素を配置します。

サンプルコード

回転する画像効果を示す完全なコード サンプルは次のとおりです。

img {
  border-radius: 50%;
  transition: transform .7s ease-in-out;
}

img:hover {
  transform: rotate(360deg);
}

このコードを使用すると、ユーザーが画像を選択すると、スムーズに 360 度回転します。