JSFiddle - React, Tailwind, and code Playground

by Luke Marlow

HTML

<div class="box"></div>

CSS

.box {
    height: 200px;
    width: 200px;
    position: absolute;
    top: 100;
    left: 100;
    background: blue;
    border-bottom: solid 1px red;
}

JavaScript

var rotate = 0;
var zoom   = 1.00;
var dir    = 'D';
setInterval(function() {
    console.log('Direction: ' + dir + ' - zoom: ' + zoom);
    rotate = (rotate == 360 ? 0 : rotate + 1);    

    if (zoom === '0.01') dir = 'U';
    if (zoom === '2.00') dir = 'D';
    
    if (dir == 'D')
        zoom = zoom - 0.01;
    else 
        zoom = +zoom + +0.01;
    zoom = zoom.toFixed(2);
    
    $('.box').css({
        'zoom': zoom,
        'transform': 'rotate(' + rotate + 'deg)'
    });
}, 10);