CSS を使用してホバーアニメーションの回転または回転画像を作成する方法

CSS を使用してホバーアニメーションの回転または回転画像を作成する方法

ホバー時に画像を回転または回転させることは、一般的で視覚的に魅力的な効果ですユーザーエンゲージメントを強化します。 CSS を使用してこの効果を実現するには、次の手順に従います。

まず、画像に円形の境界線があることを確認します。これを行うには、次のコードに示すように、border-radius を 50% に設定します。

<code class="css">img {
  border-radius: 50%;
}</code>

次に、CSS3 アニメーションを画像のtransformプロパティに追加します。 transition は状態間のスムーズな遷移を可能にし、rotate() は目的の回転効果を適用します。

<code class="css">img {
  transition: transform .7s ease-in-out;
}
img:hover {
  transform: rotate(360deg);
}</code>

この例では、ホバー上で画像が完全に 360 度回転し、滑らかな回転効果が作成されます。回転量をカスタマイズするには、rotate() 角度を調整します。

デモ用に、HTML コード スニペットの例を次に示します。

<code class="html"><img src="https://i.sstatic.net/BLkKe.jpg" width="100" height="100"/></code>

これらの CSS 要素と HTML 要素を組み合わせることで、次のことができます。ホバーアニメーションの回転または回転画像を効果的に作成します。

以上がCSS を使用してホバーアニメーションの回転または回転画像を作成する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。