如何使用 HTML 和 CSS 使图像在悬停时旋转

IT行业相对于一般传统行业，发展更新速度更快，一旦停止了学习，很快就会被行业所淘汰。所以我们需要踏踏实实的不断学习，精进自己的技术，尤其是初学者。今天golang学习网给大家整理了《如何使用 HTML 和 CSS 使图像在悬停时旋转》，聊聊，我们一起来看看吧！

图像上的悬停旋转效果可以使您的内容更具吸引力和互动性。在本教程中，我们将引导您了解如何仅使用 html 和 css 创建简单但引人注目的悬停旋转效果。

如何创造效果

html：

首先，添加以下 html 代码：

<figure class="hover-rotate">
   <img src="example.jpg" alt="sample image"/>
</figure>

您可以添加任何您喜欢的图像。

此代码设置了一个包含在具有悬停旋转类的标签中的图像。

css：

.hover-rotate {
  overflow: hidden;
  margin: 8px;
  min-width: 240px;
  max-width: 320px;
  width: 100%;
}
.hover-rotate img {
  transition: all 0.3s;
  max-width: 100%;
}
.hover-rotate:hover img {
  transform: scale(1.3) rotate(5deg);
}

运作原理：