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

はじめに

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

Skills Graph

%%%%{init: {'theme':'neutral'}}%%%% flowchart RL css(("CSS")) -.-> css/DynamicStylingGroup(["Dynamic Styling"]) css(("CSS")) -.-> css/BasicConceptsGroup(["Basic Concepts"]) css(("CSS")) -.-> css/CoreLayoutGroup(["Core Layout"]) css(("CSS")) -.-> css/IntermediateStylingGroup(["Intermediate Styling"]) css(("CSS")) -.-> css/ResponsiveandAdaptiveDesignGroup(["Responsive and Adaptive Design"]) css/BasicConceptsGroup -.-> css/selectors("Selectors") css/CoreLayoutGroup -.-> css/box_model("Box Model") css/CoreLayoutGroup -.-> css/margin_and_padding("Margin and Padding") css/CoreLayoutGroup -.-> css/borders("Borders") css/CoreLayoutGroup -.-> css/width_and_height("Width and Height") css/IntermediateStylingGroup -.-> css/pseudo_classes("Pseudo-classes") css/ResponsiveandAdaptiveDesignGroup -.-> css/mobile_first_design("Mobile First Design") css/DynamicStylingGroup -.-> css/transitions("Transitions") css/DynamicStylingGroup -.-> css/transformations("Transformations") subgraph Lab Skills css/selectors -.-> lab-35217{{"ホバー時に画像を回転させる"}} css/box_model -.-> lab-35217{{"ホバー時に画像を回転させる"}} css/margin_and_padding -.-> lab-35217{{"ホバー時に画像を回転させる"}} css/borders -.-> lab-35217{{"ホバー時に画像を回転させる"}} css/width_and_height -.-> lab-35217{{"ホバー時に画像を回転させる"}} css/pseudo_classes -.-> lab-35217{{"ホバー時に画像を回転させる"}} css/mobile_first_design -.-> lab-35217{{"ホバー時に画像を回転させる"}} css/transitions -.-> lab-35217{{"ホバー時に画像を回転させる"}} css/transformations -.-> lab-35217{{"ホバー時に画像を回転させる"}} end

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

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 でさらに多くの実験を練習することができます。