JSFiddle - React, Tailwind, and code Playground

by Umar

HTML

<div class="example example1">
    <div class="container perspective">
        <div class="cube">
            <div class="front"></div>
            <div class="back"></div>
            <div class="top"></div>
            <div class="bottom"></div>
            <div class="left"></div>
            <div class="right"></div>
        </div>
    </div>
</div>
<div class="example example2">
    <div class="container perspective">
        <div class="cube">
            <div class="front"></div>
            <div class="back"></div>
            <div class="top"></div>
            <div class="bottom"></div>
            <div class="left"></div>
            <div class="right"></div>
        </div>
    </div>
</div>
<button id="rotate" type="button">Move Cubes</button>
<p>WebKit: vanishing point is the center of each coloured container.</p>
<p>Firefox: vanishing point is the center of each coloured container.</p>

CSS

.perspective
{
    -moz-perspective: 500px;
    -webkit-perspective: 500px;
}

.container, .perspective
{
    /*width: 100px;
    height: 100px;*/
}

.example
{
    padding: 30px;
    margin-bottom: 20px;
}

.example1
{
    width: 500px;
    background: rgba(255, 0, 0, 0.3);
}

.example2
{
    width: 200px;
    background: rgba(0,0,255,0.3);
}


h1
{
    margin-bottom: 1em;
}

.cube
{
    -moz-transform-style: preserve-3d;
    -moz-transition: all ease 1500ms;
    -webkit-transform-style: preserve-3d;
    -webkit-transition: all ease 1500ms;
    position: relative;
    width: 100px;
    height: 100px;
    
}

/* Setup the Cube faces */

.front, .back, .left, .right, .top, .bottom
{
    width: 100px;
    height: 100px;
    position: absolute;
    top: 0;
    left: 0;
    -moz-backface-visibility: visible;
    -webkit-backface-visibility: visible;
    text-align: center;
    line-height: 100px;
    font-weight: bold;
    font-size: 30px;
    opacity: 0.8;
}

.back
{
    background: red;
    -webkit-transform: translate3d(0, 0, -100px);
    -moz-transform: translate3d(0, 0, -100px);
}

.bottom
{
    background: black;
    -webkit-transform: rotate3d(1,0,0,-90deg) translate3d(0, 50px, 50px);
    -moz-transform: rotate3d(1,0,0,-90deg) translate3d(0, 50px, 50px);
}

.top
{
    background: green;
    -webkit-transform: rotate3d(1,0,0,90deg) translate3d(0, -50px, 50px);
    -moz-transform: rotate3d(1,0,0,90deg) translate3d(0, -50px, 50px);
}

.right
{
    background: blue;
    -webkit-transform: rotate3d(0,1,0,90deg) translate3d(50px, 0px, 50px);
    -moz-transform: rotate3d(0,1,0,90deg) translate3d(50px, 0px, 50px);
}

.left
{
   background: orange;
    -webkit-transform: rotate3d(0,1,0,-90deg) translate3d(-50px, 0px, 50px);
    -moz-transform: rotate3d(0,1,0,-90deg) translate3d(-50px, 0px, 50px);
}

JavaScript

$(function() {
    var toggle = false;
    
    $('#rotate').click(function(event){
        event.preventDefault();
        var trns1 = toggle ? 0 : 400,
            trns2 = toggle ? 0 : 100;
        toggle = !toggle;
        
        $('.example1 .cube').css({
            '-webkit-transform': 'translate('+trns1+'px, 0)',
            '-moz-transform': 'translate('+trns1+'px, 0)'
        });
        
        $('.example2 .cube').css({
            '-webkit-transform': 'translate('+trns2+'px, 0)',
            '-moz-transform': 'translate('+trns2+'px, 0)'
        });
    });
});