JSFiddle - React, Tailwind, and code Playground

by web-nfo.com

HTML

<script src="https://www.247web.nl/~assets/247web/img/cewe/yourface/jQueryRotate.js"></script>
<div id="example">
    <img id="image" class="rotate" src="http://jsfiddle.net/img/logo.png" alt="" />
</div>
<div id="results">
    <p id="top"></p>
    <p id="left"></p>
    <p id="angle"></p>
</div>

CSS

#example{
    display:inline-block;
    background: #333;
    height: 200px;
    width: 200px;
}
#results {
    display:inline-block;
}

JavaScript

function calc(rotation)
{
    var dist=Math.sqrt(50^2+50^2);
    var degtorad=Math.PI/180;
    
    var x = Math.cos(degtorad * (135+rotation)) * dist;
    var y = Math.sin(degtorad * (135+rotation)) * dist;    
}

for(var i=0; i<361; i++)
{
    calc(i);
}

var i = 0;

function rotate()
{
    i++;
    if(i > 359) {
         i=0;
    }
    $('#image').rotate(i);
    
    setTimeout(function(){
        rotate();
    }, 100);
}

rotate();