CSSを使用してホバー時に画像を回転させるにはどうすればよいですか?

ホバートリガーによる画像回転

多くの Web アプリケーションでは、ユーザー エンゲージメントを高めるためにインタラクティブなアニメーション効果を追加することが望ましいです。そのような効果の 1 つは、ユーザーが画像の上にマウスを置いたときに画像を回転または回転させることです。この記事では、円形画像上で CSS を使用してこの機能を実現する方法を説明します。

画像回転のための CSS 実装

ホバー時に回転する画像を作成するには、「rotate(」を使用して CSS3 トランジションを利用できます。 ）' 財産。次の CSS コード スニペットは、必要なスタイルを提供します。

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

説明:

• 「transition」プロパティは、「」の継続時間とトランジション効果を設定します。 「transform」プロパティが変更されます。この場合、「イーズインアウト」効果によるトランジションには 0.7 秒かかります。
• ユーザーが画像の上にマウスを置くと、「ホバー」スタイルが適用されます。
• 「rotate(360deg)」を指定した「transform」プロパティは、画像を 360 度回転させ、回転効果を作成します。

HTML へのスタイルの適用

以下の HTML コード スニペットでは、画像は「img」タグを使用して埋め込まれています:

<code class="html"><img  src="/static/imghwm/default1.png" data-src="https://i.sstatic.net/BLkKe.jpg" class="lazy"    style="max-width:90%"  style="max-width:90%" alt="CSSを使用してホバー時に画像を回転させるにはどうすればよいですか?" ></code>

CSS コードをこの HTML ページにリンクすると、ユーザーが画像の上にカーソルを置くと画像が回転します。これは、Web アプリケーションにインタラクティブな要素を追加するためのシンプルで効果的な手法を示しています。

以上がCSSを使用してホバー時に画像を回転させるにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。