JSFiddle - React, Tailwind, and code Playground

by Dragos Petre

HTML

<div id="rotator">
      <div id="elem1" style="background-color:red;">Text1</div>
      <div id="elem2">Text2</div>
      <div id="elem3">Text3</div>
      <div id="elem4">Text4</div>
      <div id="elem5">Text5</div>
  </div>

CSS

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

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

#rotator {
   width:350px;
    height:350px;
    margin:20px auto;
    font-size:10px;
    line-height:1;
    transform-origin: 50% 50%;
}

#rotator > div {
 background-color:#e1e1e1;
 width:50px;
 height:50px;
}

JavaScript

$("document").ready(function(){

  
	

   
   var direction = 0; 
   var speedstatus = 25;
   

 
     var block = $("#rotator 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;
        $('#angle').text(angle);
    		}     
        
       	animate_circle(speedstatus);      

    function animate_circle(speed)
    {
		 $('#rotator').css('animation','circle '+speed+'s linear infinite');
     $('#rotator > div').css('animation','inner-circle '+speed+'s linear infinite');
    }
    
$( "#rotator" )
  .mouseenter(function() {
    direction = 1; 
  })
  .mouseleave(function() {
  	direction = 2;
    speedstatus = 200;
  });   
  
setInterval(status_circle, 1000);
function status_circle()
	{
  if (direction == 1)
      {
      speedstatus = speedstatus + 100;
      if (speedstatus > 500)
      	speedstatus = 500;
      animate_circle(speedstatus);
      }
  if (direction == 2)
      {
      if (speedstatus > 25)
      	speedstatus -= 100;
      if (speedstatus < 25)
      	{
        direction = 0;
       	speedstatus = 25;
        }
      animate_circle(speedstatus);
      }      
  }

});