JSFiddle - React, Tailwind, and code Playground

by synthet1c

HTML

<button id="button1" onclick="button1()">front</button>
<button id="button2" onclick="button2()">left</button>
<button id="button3" onclick="button3()">back</button>
<button id="button4" onclick="button4()">right</button>

<div id="house">
  <div id="right" class="right">RIGHT</div>
  <div id="back" class="back">BACK</div>
  <div id="left" class="left">LEFT</div>
  <div id="front" class="front">FRONT</div>
</div>

CSS

#house
{
position: relative;
height: 150px;
width: 150px;
margin:100px;
perspective:300px;
}

#right, #back, #left, #front
{
height: 150px;
width: 150px;
position: absolute;
border: 1px solid rgba(200,200,200,0.7);
background-color: rgba(0,0,255,0.5);
margin: 0px;
}

#right{
    background-color: rgba(0,0,255,0.5);
}

#back{
    background-color: rgba(0,255,0,0.5);
}

#left{
    background-color: rgba(255,0,0,0.5);
}

#front{
    background-color: rgba(0,255,255,0.5);
}

.right{
    -webkit-transform: rotateY(90deg) translatez(75px) translatex(-75px);
    -o-transform: rotateY(90deg) translatez(75px) translatex(-75px);
    transform: rotateY(90deg) translatez(75px) translatex(-75px);
    -webkit-transition: all 4s;
    -o-transition: all 4s;
    transition: all 4s;
}

.back{
    -webkit-transform: rotateY(180deg) translatez(0px) translatex(0px);
    -o-transform: rotateY(180deg) translatez(0px) translatex(0px);
    transform: rotateY(180deg) translatez(0px) translatex(0px);
    -webkit-transition: all 4s;
    -o-transition: all 4s;
    transition: all 4s;
}

.left{
    -webkit-transform: rotateY(270deg) translatez(75px) translatex(70px);
    -o-transform: rotateY(270deg) translatez(75px) translatex(70px);
    transform: rotateY(270deg) translatez(75px) translatex(70px);
    -webkit-transition: all 4s;
    -o-transition: all 4s;
    transition: all 4s;
}

.front{
    -webkit-transform: rotateY(0deg) translatez(150px) translatex(0px);
    -o-transform: rotateY(0deg) translatez(150px) translatex(0px);
    transform: rotateY(0deg) translatez(150px) translatex(0px);
    -webkit-transition: all 4s;
    -o-transition: all 4s;
    transition: all 4s;
}

JavaScript

function button1(){
         id('front').className = 'front';
         id('right').className = 'right';
         id('back').className = 'back';
         id('left').className = 'left';
    }

    function button2(){
         id('front').className = 'right';
         id('right').className = 'back';
         id('back').className = 'left';
         id('left').className = 'front';
    }    

    function button3(){
         id('front').className = 'back';
         id('right').className = 'left';
         id('back').className = 'front';
         id('left').className = 'right';
    }    

    function button4(){
         id('front').className = 'left';
         id('right').className = 'front';
         id('back').className = 'right';
         id('left').className = 'back';
    }


var id = function(elem){
    var theId = document.getElementById(elem);
    return theId;
}