Rotations in CSS
Another straight to the point solution
![](foto/Rotations-in-CSS.jpg)
#image
{
-moz-transform: rotate(17deg);
-webkit-transform: rotate(17deg);
-o-transform: rotate(17deg);
transform: rotate(17deg);
}
If you want want to support modern browsers you can just use "transform" and forget about all these "-moz", "-webkit" and "-o" prefixes.You can use this approach to create a loading animation. Let's take this static image:
![](/img/124/AJAX-Spinner.png)
@keyframes myAnimation
{
from {transform: rotate(0);}
to {transform: rotate(360deg);}
}
#myImage
{
animation: myAnimation 2s linear infinite;
border-radius: 200px;
}
and the result:
![](/img/124/AJAX-Spinner.png)
Comments