JSFiddle - React, Tailwind, and code Playground

by osserpse

HTML

<a href="#" class="handle">Rotate!</a>
<section class="container">
    <div id="cube">
        <figure class="front">1</figure>
        <figure class="back">2</figure>
        <figure class="right">3</figure>
        <figure class="left">4</figure>
        <figure class="top">5</figure>
        <figure class="bottom">6</figure>
    </div>
</section>

CSS

figure {
    margin: 0;
}

*{
    margin:0px;
    padding:0px;
}

.container {
    width: 200px;
    height: 200px;
    position: relative;
    -webkit-perspective-origin: -100% 50%;
    -webkit-perspective: 800px;
    margin: 40px auto;
    border: 1px solid #CCC;
}

#cube {
    width: 100%;
    height: 100%;
    position: absolute;
    -webkit-transform-style: preserve-3d;
    -webkit-transform: translateZ( -100px );
    -webkit-transition: -webkit-transform 0.5s;
}

#cube figure {
    width: 196px;
    height: 196px;
    display: block;
    position: absolute;
    border: 2px solid black;
    line-height: 196px;
    font-size: 120px;
    font-weight: bold;
    color: white;
    text-align: center;
}
#cube .front  { background: hsla(   0, 100%, 50%, .9 ); }
#cube .back   { background: hsla(  60, 100%, 50%, 0.9 ); }
#cube .right  { background: hsla( 120, 100%, 50%, 0.9 ); }
#cube .left   { background: hsla( 180, 100%, 50%, 0.9 ); }
#cube .top    { background: hsla( 240, 100%, 50%, 0.9 ); }
#cube .bottom { background: hsla( 300, 100%, 50%, 0.9 ); }
#cube .front  {
    -webkit-transform: rotateY(   0deg ) translateZ( 100px );
}
#cube .back   {
    -webkit-transform: rotateX( 180deg ) translateZ( 100px );
}
#cube .right  {
    -webkit-transform: rotateY(  90deg ) translateZ( 100px );
}
#cube .left   {
    -webkit-transform: rotateY( -90deg ) translateZ( 100px );
}
#cube .top    {
    -webkit-transform: rotateX(  90deg ) translateZ( 100px );
}
#cube .bottom {
    -webkit-transform: rotateX( -90deg ) translateZ( 100px );
}
#cube.show-front  {
    -webkit-transform: translateZ( -100px ) rotateY(    0deg );
}
#cube.show-back   {
    -webkit-transform: translateZ( 100px ) rotateY( -180deg );
}
#cube.show-right  {
    -webkit-transform: translateZ( -100px ) rotateY(  -90deg );
}
#cube.show-left   {
    -webkit-transform: translateZ( 100px ) rotateY(   90deg );
}
#cube.show-top    {
    -webkit-transform: translateZ( -100px ) rotateZ(  -90deg );
}
#cube.show-bottom {
   ...

JavaScript

$(document).ready(function(){
    var ctr=0;
    var panel="";
    $(".handle").click(function(){
        ctr++;
        if(ctr==1){
            $("#cube").toggleClass("show-back");
            $("#cube").removeClass(panel);
            panel="show-back";
        }
        if(ctr==2){
            $("#cube").toggleClass("show-right");
            $("#cube").removeClass(panel);
            panel="show-right";
        }
        if(ctr==3){
            $("#cube").toggleClass("show-left");
            $("#cube").removeClass(panel);
            panel="show-left";
        }
        if(ctr==4){
            $("#cube").toggleClass("show-top");
            $("#cube").removeClass(panel);
            panel="show-top";
        }
        if(ctr==5){
            $("#cube").toggleClass("show-bottom");
            $("#cube").removeClass(panel);
            panel="show-bottom";
        }
        if(ctr==6){
            $("#cube").toggleClass("show-front");
            $("#cube").removeClass(panel);
            panel="show-front";
            ctr=0;
        }
    });
});