JSFiddle - React, Tailwind, and code Playground

by Marco

HTML

<div id="ring">
  <div id="sun"></div>
</div>

CSS

*{
	margin: 0px;
}
#ring {
	background-color: #CCC;
	height: 500px;
	width: 500px;
}
.earth{
	background-color: #933;
	height: 50px;
	width: 50px;
	position: absolute;
}
#sun{
	height: 100px;
	width: 100px;
	position: absolute;
	left: 200px;
	top: 200px;
	background-color: #FC3;
}

JavaScript

$('<div></div>').attr('class','earth').appendTo('#ring').hide()
	var degrees=0;
	var centerX = $('#ring').width()/2;
	var centerY = $('#ring').height()/2;
	var ruota=function(){
		degrees+=3;
		$('div.earth').show()
		$.each($('.earth'),function(i){
			var rad = ((360*i)+degrees)*3.141/180;
			var seno=Math.sin(rad)
			var coseno = Math.cos(rad)
			var gadix=Math.floor((rad*180)/3.14)+90
			var topx=(centerY-20)+(230*seno)
			var leftx=(centerX-20)+(230*coseno)
			var stile='top:'+topx+'px;left:'+leftx+'px;transform:rotate('+gadix+'deg);-moz-transform:rotate('+gadix+'deg);-webkit-transform:rotate('+gadix+'deg);-ms-transform:rotate('+gadix+'deg);'
			$(this).attr('style',stile)
		})
	   timer1 = setTimeout(ruota,100)

		}
	ruota();