在悬停时旋转或旋转图像 [英] Spin or rotate an image on hover

问题描述

我想了解如何在悬停时制作旋转或旋转图片。我想知道如何使用 CSS 在以下代码上模拟该功能：

  img {border-radius ：50％;}  

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

解决方案

您可以使用CSS3过渡来悬停悬浮图像。

旋转图像：

DEMO

  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 =http://i.imgur.com/3DWAbmN.jpg/>  

更多信息和参考：

• 关于 MDN


• 关于 MDN


• 浏览器支持表适用于 caniuse.com


• 浏览器支持表上的2d变换 caniuse.com 上的转换

I want to find out how to make a spinning or rotating image when it is hovered. I would like to know how to emulate that functionality with CSS on the following code :

img {
  border-radius: 50%;
}

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

解决方案

You can use CSS3 transitions to spin the image on hover.

Rotating image :

DEMO

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="http://i.imgur.com/3DWAbmN.jpg" />

More info and references :

• a guide about CSS transitions on MDN
• a guide about CSS transforms on MDN
• browser support table for 2d transforms on caniuse.com
• browser support table for transitions on caniuse.com

这篇关于在悬停时旋转或旋转图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！