CSS rotate animation on mouse hover

Today in this CSS tutorial I am going to show you how to rotate an element with smooth animation effects on mouse hover using CSS code. I am going to give you a simple example which will do this task easily.

CSS3 has introduced to transform property which will be used to rotate an element. To give it animation effect we will use CSS transition property which was also introduced from CSS3.

CSS code to rotate an element on mouse hover

Now here I am going to give you the CSS code example which will rotate an element. First, we will create a rectangle with red background color having width 350 px and height 100 px. When you hover your mouse cursor on that rectangle, it will rotate with nice animation effect.

Below is the complete CSS code:

#myElement {
   width: 350px;
   height: 100px;
   background: red;
   -ms-transition: 0.4s ease-in-out;
   -webkit-transition: 0.4s ease-in-out;
   transition: 0.4s ease-in-out;
}

#myElement:hover {
    -ms-transform: rotate(15deg); /* IE 9 */
    -webkit-transform: rotate(15deg); /* Chrome, Safari, Opera */
    transform: rotate(15deg);
}

The above CSS code will rotate our rectangle by 15 degrees and on mouse out, it will back to its normal state. I have set the transition time to 0.4 seconds. That means, it will take 0.4 seconds to rotate 15 seconds and this is the reason we will see it changing its degrees with animated. You can set the transition time whatever you think is perfect and whatever you like.

Now below is the HTML:



<div id="myElement"> </div>

Try it on your browser and enjoy the CSS rotating animation effect on hover.

So how about this tutorial? Is it not so amazing and interesting tutorial to play with it? I became so excitedly when I first start learning these types of CSS functionality. I hope you also enjoyed it a lot like I did.

If you have any other question related to this tutorial then you can ask me. And again, don’t forget to practice, because practice will make you professional.

Leave a Reply

Your email address will not be published. Required fields are marked *