How to Rotate an Image Infinitely Using Only CSS

Rotating an element in HTML using CSS is pretty simple, really. Add the following CSS to the element that you want to rotate.

animation: spin 2s infinite;

Now, in the same CSS file, create a @keyframe

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

Combining all this into one block, we get the following:

<div class="rotate"><div>
.rotate {
  margin: 40px;
  width: 90px;
  height: 90px;
  background-color: #cc2a41;
  animation: spin 2s infinite;
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.