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.