css - 在悬停时旋转或旋转图像

Question

我想了解如何在鼠标悬停时制作旋转或旋转图像。我想知道如何在以下代码中使用 CSS 模拟该功能:

img {
  border-radius: 50%;
}

<img src="http://i.imgur.com/3DWAbmN.jpg" />

Answer 1

您可以使用带有 rotate() 的 CSS3 转换来悬停时旋转图像。

旋转图片:

img {
  transition: transform .7s ease-in-out;
}
img:hover {
  transform: rotate(360deg);
}

<img src="/image/BLkKe.jpg" width="100" height="100"/>

这是一个 fiddle DEMO

---

更多信息和引用:

• 关于 MDN 的 CSS 转换指南
• 有关 CSS 转换的指南 MDN
• caniuse.com 上二维变换的浏览器支持表
• caniuse.com 上转换的浏览器支持表