JSFiddle - React, Tailwind, and code Playground
by sp182
HTML
<div id="hai" style=" position:absolute; margin:200px 0 0 500px; height:300px; width:300px; border:1px solid;border-radius: 250px 250px ">
<span class="div" style="width:120px; position:absolute; height:25px; border:1px solid; margin:-10px 0 0 230px;">Untitled Document</span>
<span class="div" style="width:120px; position:absolute; height:25px; border:1px solid;margin:45px 0 0 320px;">Untitled Document</span>
<span class="div" style="width:120px; position:absolute; height:25px; border:1px solid;margin:150px 0 0 350px;">Untitled Document</span>
<span class="div" style="width:120px; position:absolute; height:25px; border:1px solid;margin:250px 0 0 330px;">Untitled Document</span>
<span class="div" style="width:120px; position:absolute; height:25px; border:1px solid;margin:330px 0 0 240px;">Untitled Document</span>
<span class="div" style="width:120px; position:absolute; height:25px; border:1px solid;margin:340px 0 0 20px ;">Untitled Document</span>
<span class="div" style="width:120px; position:absolute; height:25px; border:1px solid;margin:260px 0 0 -90px;">Untitled Document</span>
<span class="div" style="width:120px; position:absolute; height:25px; border:1px solid;margin:160px 0 0 -110px;">Untitled Document</span>
<span class="div" style="width:120px; position:absolute; height:25px; border:1px solid;margin:80px 0 0 -100px;">Untitled Document</span>
<span class="div" style="width:120px; position:absolute; height:25px; border:1px solid;margin:-30px 0 0 80px;">Untitled Document</span>
</div>
JavaScript
var check=0;
var count =0;
function countdown(count, container) {
check=check+45;
(function step() {
$('.div').css('-moz-transform','rotate(-'+count+'deg)','slow')
$('#hai').css('-moz-transform','rotate('+count+'deg)','slow')
if (count++ < check) {
setTimeout(step, 20);
}
})();
}
$('#hai').live('click', function() {
countdown(count, '#hai');
count=check;
});