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

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);
}

<div style="width:100px; float:right; ">
    <div id="obj2"></div><br /><br /><br />
    <div id="obj6"></div><br /><br /><br />
    <div id="obj1"></div><br /><br /><br />
</div>

Here is the demo

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

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

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

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

[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