JSFiddle - React, Tailwind, and code Playground

by Amatewasu

HTML

<div id="a"><div id="b">1</div></div>

CSS

#a {
    background-color: red;
    
    width: 300px;
    height: 300px;
    -webkit-border-radius: 50% 50%;
    
    -webkit-transition: all 1s ease;
}

#b {
    background-color: yellow;
    
    width: 25px;
    height: 25px;
    -webkit-border-radius: 50%; 50%;
    
    position: relative;
    top: 10%;
    left: 50%;
    
    text-align: center;
    
    -webkit-transform: rotate(180deg);
    
    -webkit-transition: all 1s ease;
}

JavaScript

var a = document.getElementById('a'),
    b = document.getElementById('b'),
    nbr = 0;

setInterval(function (){
    nbr += 20;
    
    a.style.webkitTransform = "rotate("+ nbr +"deg)";
    //b.style.webKitTransform = "rotate("+ nbr*2 +"deg)";
}, 1000);