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