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

ホバー時の画像の変形: スピンまたは回転

CSS を使用してホバー時の画像の回転効果を実現するには、CSS3 トランジションと回転()プロパティ。解決策を詳しく見てみましょう:

transition プロパティは、要素が時間の経過とともにどのように変化するかを定義します。ここで、transform .7s easy-in-out は、変換 (回転) に 0.7 秒かかり、イージング カーブに従う必要があることを示しています。

transform プロパティは、要素の位置、サイズ、または回転を変更する役割を果たします。 transform:rotate(360deg) は、:hover 状態がトリガーされたときに画像を 360 度回転するようにブラウザーに指示します。

更新されたコードは次のとおりです:

<code class="css">img {
  transition: transform .7s ease-in-out;
}

img:hover {
  transform: rotate(360deg);
}</code>

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

このコードは以下を追加します画像に滑らかなアニメーションを適用し、カーソルをその上に置くと画像が 1 回回転します。回転値をカスタマイズして回転角度を制御したり、トランジション設定を調整してアニメーションの速度とイージングを変更したりできます。

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