20 January 2016

Rotations in CSS

Another straight to the point solution

Rotating an image or any other element in CSS is very simple:

#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:

and add a bit of CSS:

@keyframes myAnimation 
{
    from {transform: rotate(0);}
    to {transform: rotate(360deg);}
}
#myImage
{
    animation: myAnimation 2s linear infinite;
    border-radius: 200px;
}

and the result:

Rotations in CSS

Comments