CSS を使用してホバー時に画像のスピンまたは回転効果を作成する方法

CSS を使用したホバー時の画像の回転または回転のエミュレーション

ホバーしたときに画像上で目的の回転または回転効果を実現するには、CSS を特定のプロパティとトランジションで利用できます。 。実装方法は次のとおりです。

コードの実装

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

提供された HTML コードでは、各画像要素は上記の CSS スタイルを使用して変更されます。

<code class="html"><img  src="/static/imghwm/default1.png" data-src="http://i.imgur.com/3DWAbmN.jpg" class="lazy" alt="CSS を使用してホバー時に画像のスピンまたは回転効果を作成する方法" >
<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>

説明

• Border-radius: 画像を円形 (50% border-radius) に設定します。
• Transition: を定義します。ホバー時の画像の変形のスムーズな移行 (持続時間とイージング関数)。
• Transform: Rotate: ホバーすると、画像の変形プロパティが 360 度回転するように設定され、回転します。 .

この CSS 実装により、画像の上にマウスを置くと、画像がその中心を中心にスムーズに回転できます。

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