ホバー時の画像の変形: スピンまたは回転
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 サイトの他の関連記事を参照してください。