引人入胜的图像旋转效果

简介

在本实验中，我们将学习如何使用 CSS 属性创建一个悬停效果，使图像旋转。通过使用 scale()、rotate() 和 transition，当用户将鼠标悬停在父元素上时，我们可以使图像看起来旋转。我们还将使用 overflow: hidden 来隐藏图像变换中多余的部分，从而创建一个简洁精致的效果。

Skills Graph

%%%%{init: {'theme':'neutral'}}%%%% flowchart RL css(("CSS")) -.-> css/BasicConceptsGroup(["Basic Concepts"]) css(("CSS")) -.-> css/ResponsiveandAdaptiveDesignGroup(["Responsive and Adaptive Design"]) css(("CSS")) -.-> css/DynamicStylingGroup(["Dynamic Styling"]) css(("CSS")) -.-> css/CoreLayoutGroup(["Core Layout"]) css(("CSS")) -.-> css/IntermediateStylingGroup(["Intermediate Styling"]) 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

悬停时图像旋转

虚拟机中已经提供了 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 中练习更多实验来提升你的技能。