魅力的な画像回転エフェクト

はじめに

この実験では、CSS プロパティを使用して画像を回転させるホバーエフェクトを作成する方法を学びます。scale()、rotate()、および transition を使用することで、ユーザーが親要素の上にホバーしたときに画像が回転するように見えるようにすることができます。また、画像変換から余分な部分を非表示にするために overflow: hidden を使用して、クリーンで磨きのかかったエフェクトを作成します。

これは Guided Lab です。学習と実践を支援するためのステップバイステップの指示を提供します。各ステップを完了し、実践的な経験を積むために、指示に注意深く従ってください。過去のデータによると、この初級レベルの実験の完了率は 91%です。学習者から 88% の好評価を得ています。

ホバー時に画像を回転させる

VM には既に index.html と style.css が用意されています。

親要素（<figure> 要素である必要があります）にホバーしたときに画像に回転エフェクトを作成するには、scale()、rotate()、および transition プロパティを使用します。画像の変換が親要素からはみ出さないようにするには、親要素の CSS に overflow: hidden を追加します。以下は、HTML と CSS のコードの例です。

<figure class="hover-rotate">
  <img src="https://picsum.photos/id/669/600/800.jpg" />
</figure>

.hover-rotate {
  overflow: hidden;
  margin: 8px;
  min-width: 240px;
  max-width: 320px;
  width: 100%;
}

.hover-rotate img {
  transition: all 0.3s;
  box-sizing: border-box;
  max-width: 100%;
}

.hover-rotate:hover img {
  transform: scale(1.3) rotate(5deg);
}

右下隅の「Go Live」をクリックして、ポート 8080 でウェブサービスを実行してください。その後、Web 8080 タブを更新して、ウェブページをプレビューできます。

まとめ

おめでとうございます！あなたはホバー時に画像を回転させる実験を完了しました。あなたの技術を向上させるために、LabEx でさらに多くの実験を練習することができます。