JSFiddle - React, Tailwind, and code Playground

by Константин Дралюк

HTML

<div id="parentdiv"></div>

CSS

#parentdiv
    {
        position: relative;
        width: 150px;
        height: 150px;
        background-color: #ac5;
        border-radius: 150px;
        margin: 150px;
    }

    .div2
    {
        position: absolute;
        width: 80px;
        height: 80px;
        background-color: #f00;
    }

JavaScript

var div = 360 / 8;
    var radius = 150;
    var parentdiv = document.getElementById('parentdiv');
    var offsetToParentCenter = parseInt(parentdiv.offsetWidth / 2);  //assumes parent is square
    var offsetToChildCenter = 40;
    var totalOffset = offsetToParentCenter - offsetToChildCenter;
    for (var i = 1; i <= 8; ++i)
    {
        var childdiv = document.createElement('div');
        childdiv.className = 'div2';
        childdiv.style.position = 'absolute';
        var y = Math.sin((div * i) * (Math.PI / 180)) * radius;
        var x = Math.cos((div * i) * (Math.PI / 180)) * radius;
        childdiv.style.top = (y + totalOffset).toString() + "px";
        childdiv.style.left = (x + totalOffset).toString() + "px";
        parentdiv.appendChild(childdiv);
    }
var start = 0;
setInterval(function() {
    start +=45;
    $('#parentdiv').css({ 
        "transform": "rotate(" + start + "deg)",
        "transition-duration": "0.5s",
    });
}, 300);