JSFiddle - React, Tailwind, and code Playground

by KARTHIKEYAN K

HTML

<div id="rot">
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
    <div>6</div>
    <div>7</div>
    <div>8</div>
    <div>9</div>
    <div>10</div>
</div>

CSS

@keyframes circle {
    from { transform:rotate(0deg); }
    to { transform:rotate(360deg); }
}

body {
    background-color: Aquamarine;
} 
@keyframes inner-circle {
    from { transform:rotate(0deg); }
    to { transform:rotate(-360deg); }
}

#rot {
    width:350px;
    height:350px;
    margin:20px auto;
    font-size:16px;
    line-height:1;
    animation: circle 25s linear infinite;
    transform-origin: 50% 50%;
}

#rot > div {
 animation: inner-circle 25s linear  infinite;
 width:50px;
 height:50px;
}

JavaScript

$("document").ready(function(){
    var block = $("#rot div").get(),
    increase = Math.PI * 2 / block.length,
    x = 0, y = 0, angle = 0;

    for (var i = 0; i < block.length; i++) {
        var elem = block[i];
        x = 140 * Math.cos(angle) + 150;
        y = 140 * Math.sin(angle) + 150;
        elem.style.position = 'absolute';
        elem.style.left = x + 'px';
        elem.style.top = y + 'px';
        var rot = 90 + (i * (360 / block.length));        
        angle += increase;
    }

});