How to Rotate HTML Elements Using CSS

In this tutorial we will see how to rotate an element like image or text using CSS. it is generally required by a web designer to give some animation effect. Animation add some extra affect in your webpage. In this example, we will use CSS rotation property to rotate an element. @keyframes rule is used to animate element from current style to the new style. We just need to bind animation to an element.

In this animation, we define animation name (eg. myobject ), animation duration(5s), iteration-count(eg: infinite), and direction (linear)

How to Rotate HTML Elements Using CSS

-webkit-transform property is used to transform an element in 2D or 3D space.

HTML

<img src="football.jpg" id="my_img">  

CSS

    #my_img   { 
animation : myobject 5s infinite ease;
-webkit-animation: myobject 5s infinite ease; } @-webkit-keyframes myobject {
from {-webkit-transform: rotate(0deg)} to {-webkit-transform: rotate(360deg)} }

Live Demo

READ ALSO :   Popup an Image on Mouseover Using CSS

Leave a Reply

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