Spin or rotate an image on hover

by

You can use CSS3 transitions with rotate() to spin the image on hover.

Rotating image :

img {
  transition: transform .7s ease-in-out;
}
img:hover {
  transform: rotate(360deg);
}
<img src="https://i.stack.imgur.com/BLkKe.jpg" width="100" height="100"/>

Here is a fiddle DEMO

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

More Related Contents:

  1. Prevent flicker on webkit-transition of webkit-transform [duplicate]
  2. Hover effect : expand bottom border
  3. Simulating transform-origin using translate
  4. How to prevent Webkit text rendering change during CSS transition
  5. Flip a 3D card with CSS
  6. CSS3 Transform affecting other elements with chrome/safari
  7. webkit transform blocking link
  8. Why does enabling hardware-acceleration in CSS3 slow down performance?
  9. CSS3 background image transition
  10. Rotated elements in CSS that affect their parent’s height correctly
  11. CSS 3 slide-in from left transition
  12. CSS: Hover one element, effect for multiple elements?
  13. CSS Animation and Display None
  14. CSS 3d transform doesn’t work if perspective is set in the end of property
  15. 3D CSS transform, jagged edges in Firefox
  16. Expand div from the middle instead of just top and left using CSS
  17. CSS: styled a checkbox to look like a button, is there a hover?
  18. CSS Transform Skew [duplicate]
  19. rotate3d shorthand
  20. Why is text getting blurry and wobbles during 2d scale transform
  21. How can I transition height: 0; to height: auto; using CSS?
  22. How to transition CSS display + opacity properties
  23. Can I apply a CSS transition to the overflow property?
  24. Does Internet Explorer support CSS transitions?
  25. Why is backface-visibility hidden not working in IE10 when perspective is applied to parent elements?
  26. 3d transforms on SVG element
  27. How to apply child:hover but not parent:hover
  28. perspective and translateZ moves diagonally
  29. Image moves on hover when changing filter in chrome
  30. Turning off Twitter Bootstrap Navbar Transition animation

Leave a Comment