I want to know how to make a rotating image when the cursor is hovering over it.
I would like to understand how to implement this functionality using CSS and the following code:

img { border-radius: 50%; } 
 <img src="http://i.imgur.com/3DWAbmN.jpg" />

Translation question: Spin or rotate an image on hover

2 answers 2

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

Rotating image:

 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" />

Another example:

Spiral rotation

enter image description here

 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"/>

Additional information and links:

  • MDN CSS transitions guide
  • Guide to transforms CSS to MDN
  • Browser support table for 2d-transforms at caniuse.com
  • Browser support table for transitions on caniuse.com

Translation answer: Spin or rotate an image on hover @ web-tiki

  • -webkit already can not write. - Qwertiy ♦
  • @Qwertiy this answer was already noted as a duplicate with your post ru.stackoverflow.com/questions/499107/… , but there’s nothing in common except the word “rotation” You have two text blocks that replace each other when you spin around “Y ", and I have one image in the answer, which rotates around the axis" Z " - Alexandr_TT
  • @Alexandr_T, if you didn’t agree that it was a duplicate, you shouldn’t have to agree - Grundy

 @keyframes _img { 0% { -webkit-transform: rotateX(-360deg) translateZ(60px) rotateX(360deg); transform: rotateX(-360deg) translateZ(60px) rotateX(360deg); } 25% { -webkit-transform: rotate(360deg); -webkit-filter: drop-shadow(0px 0px 20px hsla(240, 80%, 50%, 1)); transform: rotate(360deg); filter: drop-shadow(0px 0px 20px hsla(240, 80%, 50%, 1)); } 50% { -webkit-transform: rotate(0deg); -webkit-filter: drop-shadow(0px 0px 20px hsla(240, 80%, 50%, 1)); transform: rotate(0deg); filter: drop-shadow(0px 0px 20px hsla(240, 80%, 50%, 1)); } 100% { -webkit-transform: rotateX(0deg) translateZ(60px) rotateX(0deg); transform: rotateX(0deg) translateZ(60px) rotateX(0deg); } } div { border: 1px solid hsla(0, 0%, 100%, 1); display: block; position: relative; width: calc(20vw); height: calc(20vw); margin: 0% auto; background: hsla(0, 0%, 60%, 1); box-shadow: inset .75em .75em .75em hsla(0, 0%, 100%, 1), inset -.75em -.75em .75em hsla(0, 0%, 100%, 1); perspective: 300px; transform-style: preserve-3d; transition: all 1s linear 0s; } img { border-radius: 50%; border: 1px solid hsla(0, 0%, 60%, 1); position: absolute; width: calc(8vw); height: calc(8vw); top: calc(100%/3 - 3%); left: calc(100%/3 - 4%); -webkit-filter: drop-shadow(0px 0px 40px hsla(70, 80%, 40%, 1)); -webkit-transform: rotateX(0deg) translateZ(60px) rotateX(0deg); filter: drop-shadow(0px 0px 40px hsla(70, 80%, 40%, 1)); transform: rotateX(0deg) translateZ(60px) rotateX(0deg); } div:hover img { animation: _img 3s 0s linear; } 
 <div> <img src="http://i.imgur.com/3DWAbmN.jpg" /> </div>

  • you do not have a beautiful solution, see how img leads after a hover from the author of the responder and how the exit from the hover in your case occurs - user33274
  • Do not confuse the rotating image with the rotation ... - Dhunga
  • At least the answer above is more beautiful - user33274