JSFiddle - React, Tailwind, and code Playground

by ruisoftware

HTML

<div id="d0">
    <div id="d1">1</div>
    <div id="d2">2</div>
</div>

CSS

#d0 {
    width: 350px;
    height: 250px;
    border: 1px dotted blue;
}

#d1, 
#d2 {
    display: inline-block;
    width: 150px;
    height: 100px;
    border: 1px dotted red;
    -webkit-transform: rotate(60deg);
}

#d2 {
    border-color: black;
    -webkit-transform: rotate(30deg);
}

JavaScript

$("#d0").css('webkit-transform', 'rotate(-60deg)');
var step1 = true,
    step1Value;

$({ deg1: 60, deg2: 0 }).animate({ deg1: 0, deg2: 30 }, {
    duration: 1000,
    step: function(now, fx) {
        if (step1) {
            step1Value = now;
        } else {
            $("#d0").css('webkit-transform', 'rotate(' + (- step1Value - now) + 'deg)');
        }
        step1 = !step1;
    }
});