在悬停时旋转或旋转图像

Question

我想知道如何在悬停时制作旋转或旋转的图像.我想知道如何使用CSS在以下代码上模拟该功能:

img {
  border-radius: 50%;
}

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

Answer 1

您可以使用CSS3过渡rotate()来悬停图像.

旋转图像:

img {
  border-radius: 50%;
  -webkit-transition: -webkit-transform .8s ease-in-out;
          transition:         transform .8s ease-in-out;
}
img:hover {
  -webkit-transform: rotate(360deg);
          transform: rotate(360deg);
}

<img src="https://i.stack.imgur.com/BLkKe.jpg" width="100" height="100"/>

这是一个小提琴演示

更多信息和参考:

• 关于MDN上CSS转换的指南
• 关于MDN上的 CSS转换的指南
• caniuse.com上的 2d转换浏览器支持表
• caniuse.com上的转换浏览器支持表

Answer 2

这很简单。

1. 您添加图像。

2. 您为此图像创建了一个 css 属性。

   img { transition: all 0.3s ease-in-out 0s; }
   

3. 您添加这样的动画：

   img:hover
   {
       cursor: default;
       transform: rotate(360deg);
       transition: all 0.3s ease-in-out 0s;
   }