JSFiddle - React, Tailwind, and code Playground
HTML
<div id="thing">
</div>
CSS
#thing {
width: 200px; height: 200px;
margin: 2em;
background-color: rgba(50,150,170,0.8);
/* transition: all 0.016s linear; */
}
JavaScript
var thing = {
"rotation" : 0
,"position" : { "x" : 0, "y" : 0 }
,"$elt" : $('#thing')
};
function loop (loopIteration) {
loopIteration++;
if (loopIteration < 1000) {
timeoutId = window.setTimeout(function(){
loop(loopIteration); }, 16);
}
thing.rotation += 5;
thing.position.x += 0.4;
thing.position.y += 0.4;
var transX = thing.position.x;
var transY = thing.position.y;
if (thing.rotation > 360) thing.rotation = 360 - thing.rotation;
thing.$elt.css("-webkit-transform", "translate(" + transX + "px," + transY + "px) rotate(" + thing.rotation + "deg)");
//thing.$elt.css("-webkit-transform", "rotate(" + thing.rotation + "deg) translate(" + transX + "px," + transY + "px)")
}
window.loopTimeoutId = window.setTimeout(function(){ loop(1); }, 16);