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

Patricia Arquette
リリース: 2024-11-04 08:53:02
オリジナル
1011 人が閲覧しました

How to Make an Image Spin on Hover with 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 サイトの他の関連記事を参照してください。

ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート