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

如何创造效果

HTML：

首先添加以下HTML代码：

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

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

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);
}

运作原理：

.hover-rotate 类设置图像的尺寸并隐藏任何溢出。 .hover-rotate img 类处理平滑过渡效果。

当您将鼠标悬停在图像上时，由于变换属性，图像会放大 1.3 倍并旋转 5 度。

如果您发现本教程有帮助，请随时与其他人分享或在下面发表评论。有关网页设计的更多提示和技巧，请务必查看我们的其他帖子。

访问我的网站以获取更多此类教程