Spin or rotate an image on hover

Question

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     x000D   x000D  img   x000D    border-radius  50   x000D    x000D   lt img src  http   i imgur com 3DWAbmN jpg    gt  x000D   x000D   x000D

User · Answer

It s very simple    You add an image  You create a css property to this image   img   transition  all 0 3s ease-in-out 0s     You add an animation like that   img hover       cursor  default      transform  rotate 360deg       transition  all 0 3s ease-in-out 0s

User · Answer

if you want to rotate inline elements  you should set the inline element to inline-block first   i     display  inline-block     i hover     animation  rotate-btn  5s linear 3    -webkit-animation  rotate-btn  5s linear 3      keyframes rotate-btn     0        transform  rotate 0         100        transform  rotate -360deg

User · Answer

Here is my code  this flips on hover and flips back off-hover   CSS    flip-container     background  transparent    display  inline-block      flip-this     position  relative    width  100     height  100     transition  transform 0 6s    transform-style  preserve-3d      flip-container hover  flip-this     transition  0 9s    transform  rotateY 180deg       HTML    lt div class  flip-container  gt       lt div class  flip-this  gt           lt img width  100  alt  Godot icon  src  https   upload wikimedia org wikipedia commons thumb 6 6a Godot icon svg 512px-Godot icon svg png  gt       lt  div gt   lt  div gt    Fiddle this

User · Answer

here is the automatic spin and rotating zoom effect using css3   obj1      float right      width  96px      height  100px      -webkit-animation  mymove 20s infinite     Chrome  Safari  Opera        animation  mymove 20s infinite      animation-delay 2s      background-image url  obj1 png        transform  scale 1 5       -moz-transform  scale 1 5       -webkit-transform  scale 1 5       -o-transform  scale 1 5       -ms-transform  scale 1 5      IE 9        margin-bottom  70px      obj2      float right      width  96px      height  100px      -webkit-animation  mymove 20s infinite     Chrome  Safari  Opera        animation  mymove 20s infinite      animation-delay 2s      background-image url  obj2 png        transform  scale 1 5       -moz-transform  scale 1 5       -webkit-transform  scale 1 5       -o-transform  scale 1 5       -ms-transform  scale 1 5      IE 9        margin-bottom  70px      obj6      float right      width  96px      height  100px      -webkit-animation  mymove 20s infinite     Chrome  Safari  Opera        animation  mymove 20s infinite      animation-delay 2s      background-image url  obj6 png        transform  scale 1 5       -moz-transform  scale 1 5       -webkit-transform  scale 1 5       -o-transform  scale 1 5       -ms-transform  scale 1 5      IE 9        margin-bottom  70px        Standard syntax     keyframes mymove       50   transform  rotate 30deg        lt div style  width 100px  float right    gt       lt div id  obj2  gt  lt  div gt  lt br   gt  lt br   gt  lt br   gt       lt div id  obj6  gt  lt  div gt  lt br   gt  lt br   gt  lt br   gt       lt div id  obj1  gt  lt  div gt  lt br   gt  lt br   gt  lt br   gt   lt  div gt    Here is the demo

User · Answer

You can use CSS3 transitions with rotate   to spin the image on hover   Rotating image     x000D   x000D  img   x000D    border-radius  50   x000D    -webkit-transition  -webkit-transform  8s ease-in-out  x000D            transition          transform  8s ease-in-out  x000D    x000D  img hover   x000D    -webkit-transform  rotate 360deg   x000D            transform  rotate 360deg   x000D    x000D   lt img src  https   i stack imgur com BLkKe jpg  width  100  height  100   gt  x000D   x000D   x000D    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

[css] Spin or rotate an image on hover

Examples related to css

Examples related to hover

Examples related to css-transitions

Examples related to css-transforms