JSFiddle - React, Tailwind, and code Playground

by Kiran G

HTML

<div id="text" class="rotation0">ROTATING</div>

CSS

.rotation0 { display:block; position:relative; width:200px; height:200px; }
.rotation60 { display:block; position:relative; width:200px; height:200px; -webkit-transform:rotate(60deg); -moz-transform:rotate(60deg); -ms-transform:rotate(60deg); -o-transform:rotate(60deg); transform:rotate(60deg); }
.rotation120 { display:block; position:relative; width:200px; height:200px; -webkit-transform:rotate(120deg); -moz-transform:rotate(120deg); -ms-transform:rotate(120deg); -o-transform:rotate(120deg); transform:rotate(120deg); }
.rotation180 { display:block; position:relative; width:200px; height:200px; -webkit-transform:rotate(180deg); -moz-transform:rotate(180deg); -ms-transform:rotate(180deg); -o-transform:rotate(180deg); transform:rotate(180deg); }
.rotation240 { display:block; position:relative; width:200px; height:200px; -webkit-transform:rotate(240deg); -moz-transform:rotate(240deg); -ms-transform:rotate(240deg); -o-transform:rotate(240deg); transform:rotate(240deg); }
.rotation300 { display:block; position:relative; width:200px; height:200px; -webkit-transform:rotate(300deg); -moz-transform:rotate(300deg); -ms-transform:rotate(300deg); -o-transform:rotate(300deg); transform:rotate(300deg); }
.rotation360 { display:block; position:relative; width:200px; height:200px; -webkit-transform:rotate(360deg); -moz-transform:rotate(360deg); -ms-transform:rotate(360deg); -o-transform:rotate(360deg); transform:rotate(360deg); }

JavaScript

var rotation = 0;
function rotate() {
rotation = (rotation+60 > 360) ? 0 : rotation+60;
document.getElementById("text").className = "rotation"+rotation;
}

window.setInterval("rotate()", 1000);