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

在悬停时变换图像：旋转或旋转

使用 CSS 实现悬停时旋转图像的效果需要利用 CSS3 过渡和旋转（）属性。让我们深入研究解决方案：

transition 属性定义元素应如何随时间变化。这里，transform .7s escape-in​​-out 表示变换（旋转）应该花费 0.7 秒，并且应该遵循缓动曲线。

transform 属性负责修改元素的位置、大小或旋转。 transform:rotate(360deg) 告诉浏览器在触发 :hover 状态时将图像旋转 360 度。

这是更新的代码：

<code class="css">img {
  transition: transform .7s ease-in-out;
}

img:hover {
  transform: rotate(360deg);
}</code>

<code class="html"><img  src="/static/imghwm/default1.png" data-src="https://i.sstatic.net/BLkKe.jpg" class="lazy"    style="max-width:90%"  style="max-width:90%" alt="如何使用 CSS 使图像在悬停时旋转？" ></code>

此代码添加图像的平滑动画，使其在光标悬停在其上时旋转一次。您可以自定义旋转值来控制旋转角度或调整过渡设置来修改动画的速度和缓动。

以上是如何使用 CSS 使图像在悬停时旋转？的详细内容。更多信息请关注PHP中文网其他相关文章！