/

How to Continuously Rotate an Image using CSS

How to Continuously Rotate an Image using CSS

Learn how to utilize CSS Animations to make an image rotate continuously.

While developing the landing page for the React Handbook, I found myself needing to rotate an image. Specifically, I wanted to rotate an SVG image, but this technique can be applied to any image type or HTML element.

To rotate the desired element, simply add the following CSS instruction:

1
animation: rotation 2s infinite linear;

Alternatively, you can assign a class, such as rotate, to the element instead of targeting it directly:

1
2
3
.rotate {
animation: rotation 2s infinite linear;
}

Feel free to adjust the 2s value to control the speed of rotation.

Next, insert the following code snippet outside any selector:

1
2
3
4
5
6
7
8
@keyframes rotation {
from {
transform: rotate(0deg);
}
to {
transform: rotate(359deg);
}
}

That’s it! Your elements should now begin rotating.

For more information, explore our guides on CSS Animations and CSS Transitions.

Here is an example of the result in CodePen:

See the Pen How to use CSS Animations to continuously rotate an image by Flavio Copes (@flaviocopes) on CodePen.

tags: [“CSS animations”, “web development”, “image rotation”, “CSS transitions”]