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