JSFiddle - React, Tailwind, and code Playground

by Nicolas PUJOL

HTML

<button id="go">Go test</button>
<div id="animated" class="hide">
    <div class="limit">
        <img id="rotate" src="http://lorempicsum.com/futurama/450/300/1" alt="test" class="rotate-img" />
        <img src="http://lorempicsum.com/futurama/350/200/2" alt="test" />
    </div>
</div>

CSS

html, body {
    width:100%;
    height: 100%;
}
.hide {
    display: none;
    opacity: 0;
}
.rotate-img {
    position: absolute;
    z-index: -5;
}
.limit {
}

JavaScript

$("#go").one("click", function () {
    testA();
});

function testA() {
    $("#animated").show().animate({
        opacity: "1"
    }, "slow", function () {
        //done
        setInterval(function () {
            rotation += 0.5;
            rotate($("#rotate"), rotation);
        }, 100);
    });
}


var rotation = 0;

function rotate(elt, degrees) {
    $(elt).css({
        '-webkit-transform': 'rotate(' + degrees + 'deg)',
            '-moz-transform': 'rotate(' + degrees + 'deg)',
            '-ms-transform': 'rotate(' + degrees + 'deg)',
            'transform': 'rotate(' + degrees + 'deg)'
    });
}