JSFiddle - React, Tailwind, and code Playground

by renowan

HTML

<section id="container">
    <div id="box" class="">
        <li class="front">1</li>
        <li class="back">2</li>
        <li class="right">3</li>
        <li class="left">4</li>
        <li class="top">5</li>
        <li class="bottom">6</li>
    </div>
</section>

<section id="option-1">
    <button id="btn_1">show 1</button>
    <button id="btn_2">show 2</button>
    <button id="btn_3">show 3</button>
    <button id="btn_reset">reset</button>
</section>

CSS

body {
    font-family: 'Helvetica Neue', Arial, sans-serif;
    font-size: 12px;
    -webkit-text-size-adjust: none;
    -moz-text-size-adjust: none;
    color: #333;
    background-color: #E1DFD9;
}


#option-1 {
    width: 500px;
    position: relative;
    z-index: 100;
    margin-bottom: 60px;
    margin: 0 auto 40px;
}

#box li {
    margin: 0;
}

#container {
    width: 500px;
    height: 400px;
    background: #FFF;
    overflow: hidden;
    z-index: 60;
    position: relative;
    margin: 20px auto 30px;
    border: 1px solid #CCC;
    -webkit-perspective: 900px;
    -moz-perspective: 900px;
}

#box {
    width: 300px;
    height: 300px;
    top: 50px;
    left: 100px;
    background: hsla( 000, 30%, 50%, 0.2 );
    position: absolute;
    -webkit-transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
    -webkit-transition: -webkit-transform 1s;
    -moz-transition: -moz-transform 1s;
    -webkit-transform: translateX( 0px ) translateY( 0px ) translateZ( 0px ) rotateX( 0deg ) rotateY( 0deg ) rotateZ( 0deg );
    -moz-transform: translateX( 0px ) translateY( 0px ) translateZ( 0px ) rotateX( 0deg ) rotateY( 0deg ) rotateZ( 0deg );
}

#box li {
    display: block;
    position: absolute;
    border: 1px solid #797979;
    line-height: 196px;
    font-size: 90px;
    text-align: center;
    font-weight: bold;
    color: white;
}
    
#box.panels-backface-invisible figure {
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
}

#box .front,
#box .back {
    width: 300px;
    height: 300px;
}

#box .right,
#box .left {
    width: 300px;
    height: 300px;
    left: 0px;
}

#box .top,
#box .bottom {
    width: 300px;
    height: 300px;
    top: 50px;
    line-height: 96px;
}

    
#box .front        { background: hsla( 000, 100%, 50%, 0.4 ); }
#box .back        { background: hsla( 160, 100%, 50%, 0.4 ); }
#box .right        { background: hsla( 120, 100%, 50%, 0.4 ); }
#box .left        { background: hsla( 180, 100%,...

JavaScript

var boxTranslateX = 0;
var boxTranslateY = 0;
var boxTranslateZ = -300;
    
var rotateX = -25;
var rotateY = -45;
var rotateZ = 0;

$(function() {
    
    angleEngine();
    
    $("#btn_1").click(function(){
        rotateY = -90;
        angleEngine();
        
    });
    
    $("#btn_2").click(function(){
        rotateY = -180;
        angleEngine();
        
    });
    
    $("#btn_3").click(function(){
        rotateY = -270;
        angleEngine();
        
    });
    
    $("#btn_reset").click(function(){
        boxTranslateX = 0;
        boxTranslateY = 0;
        boxTranslateZ = 0;
            
        rotateX = 0;
        rotateY = 0;
        rotateZ = 0;
        angleEngine();
        
    });
    
    
    function angleEngine() {
    
        $("#box").css({
           
            "-webkit-transition-duration":"2s",
            "-moz-transition-duration":"2s",
            
            
            "-webkit-transform": 'translate3d( ' + boxTranslateX + 'px, ' + boxTranslateY+'px, '+boxTranslateZ+'px) rotateX('+rotateX+'deg) rotateY('+rotateY+'deg) rotateZ('+rotateZ+'deg)',
            
            "-moz-transform": 'translate3d( '+boxTranslateX+'px, '+ boxTranslateY+'px, '+boxTranslateZ+'px) rotateX('+rotateX+'deg) rotateY('+rotateY+'deg) rotateZ('+rotateZ+'deg)'
            
        });
    }
});