JSFiddle - React, Tailwind, and code Playground

by jfriend00

HTML

<div align="center" style="width:100%;">

<div style="text-align:left;width:1000px;height:500px;">

<DIV id="level4" style="position:absolute;top:0px;left:0px;z-index:4;">

<div class="spacecontainer_main">
<div id="planet" class="spacelayer_main spacelayer_start" style="background-color:rgba(0, 0, 0, .5);width:450px;height:450px;float:left;">
<img src="http://www.klossal.com/portfolio/layers/planet.png"/>
</div>
</div></DIV>

<DIV id="level3" style="position:absolute;top:0px;left:0px;z-index:3;">

<div class="spacecontainer_main">
<div id="nebula" class="spacelayer_main" style="background-color:rgba(0, 0, 0, .5);width:450px;height:450px;float:left;">
<img src="http://www.klossal.com/portfolio/layers/nebula.png"/>
</div>
</div></DIV>

<DIV id="level2" style="position:absolute;top:0px;left:0px;z-index:2;">

<div class="spacecontainer_main">
<div id="light" class="spacelayer_main" style="background-color:rgba(0, 0, 0, .5);width:450px;height:450px;float:left;">
<img src="http://www.klossal.com/portfolio/layers/light.png"/>
</div>
</div></DIV>

<DIV id="level1" style="position:absolute;top:0px;left:0px;z-index:1;">

<div class="spacecontainer_main">
<div id="stars" class="spacelayer_main" style="background-color:rgba(0, 0, 0, .5);width:450px;height:450px;float:left;">
<img src="http://www.klossal.com/portfolio/layers/stars.png"/>
</div>
</div></DIV>


</div></div>
<button onclick="start()">Start</button><br>
<button onclick="reset()">Reset</button>

CSS

.spacelayer_main
{
-webkit-transform-style: preserve-3d;
-webkit-transform:skew(-40deg,0deg);
position: absolute;
border: 1px solid black;
}
.spacecontainer_main
{
position: relative;
height: 450px;
width: 450px;
border: 1px solid black;
perspective:297;
perspective-origin: 10% 10%;
-webkit-perspective:900; /* Safari and Chrome */
-webkit-perspective-origin: 92% 80%; /* Safari and Chrome */
}
.spacelayer_start
{
    -webkit-transition-property: all; 
    -webkit-transition-duration: 2s;     
    -webkit-transform: 
                   translate3d(-14px, -180px, 3px)
                   scale3d(0.65, 0.9, 0.95)
                   rotate3d(0, 3, 2, 180deg)
                   rotatez(-25deg)
                   rotatey(3deg);
}
#nebula
{
-webkit-transform: 
                   translate3d(-14px, -120px, 3px)
                   scale3d(0.65, 0.9, 0.95)
                   rotate3d(0, 3, 2, 180deg)
                   rotatez(-25deg)
                   rotatey(3deg);
}
#light
{
-webkit-transform: 
                   translate3d(-14px, -50px, 3px)
                   scale3d(0.65, 0.9, 0.95)
                   rotate3d(0, 3, 2, 180deg)
                   rotatez(-25deg)
                   rotatey(3deg);
}
#stars
{
-webkit-transform: 
                   translate3d(-14px, 20px, 3px)
                   scale3d(0.65, 0.9, 0.95)
                   rotate3d(0, 3, 2, 180deg)
                   rotatez(-25deg)
                   rotatey(3deg);
}


.spacelayer_collapse3
{
-webkit-transform: 
                   translate3d(-14px, -80px, 3px)
                   scale3d(0.65, 0.9, 0.95)
                   rotate3d(0, 3, 2, 180deg)
                   rotatez(-25deg)
                   rotatey(3deg);
}

.spacelayer_collapse2
{
-webkit-transform: 
                   translate3d(-14px, -130px, 3px)
                   scale3d(0.65, 0.9, 0.95)
                   rotate3d(0, 3, 2, 180deg)
                   rotatez(-25deg)
                   rotatey(3deg);
}

 .box 
    {     
       ...

JavaScript

function start() {
    var planet = document.getElementById("planet");
    
    function done1() {
        console.log("done called");
        planet.removeEventListener("webkitTransitionEnd", done1);
        planet.addEventListener("webkitTransitionEnd", done2);
        removeClass(planet, 'spacelayer_collapse3');
        addClass(planet, 'spacelayer_collapse2');
    }
    
    function done2() {
        planet.removeEventListener("webkitTransitionEnd", done2);
        
    }
    
    reset();
    planet.addEventListener("webkitTransitionEnd", done1, false);
    addClass(planet, 'spacelayer_collapse3');
  
}

function reset() {
    var planet = document.getElementById("planet");
    removeClass(planet, "spacelayer_collapse2 spacelayer_collapse3");
}

function removeClass(o, cls) {
    var classes = cls.split(" ");
    var className = " " + o.className + " ";
    for (var i = 0; i < classes.length; i++) {
        className = className.replace(" " + classes[i] + " ", " ");
    }
    o.className = className.replace(/\s+/g, " ").replace(/^\s+|\s+$/g, "");
}

function addClass(o, cls) {
    if (o.className) {
        cls = " " + cls;
    }
    o.className += cls;
}