JSFiddle - React, Tailwind, and code Playground

by karmeljuk

HTML

<script src="http://desandro.github.io/3dtransforms/js/rotate-box.js"></script>
<script src="http://desandro.github.io/3dtransforms/js/utils.js"></script>
<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>

<section id="options">
    <p id="show-buttons">
      <button class="show-front">Show 1</button>
      <button class="show-back">Show 2</button>
      <button class="show-right">Show 3</button>
      <button class="show-left">Show 4</button>
      <button class="show-top">Show 5</button>
      <button class="show-bottom">Show 6</button>
    </p>
    <p>
      <button id="toggle-backface-visibility">Toggle Backface Visibility</button>
    </p>
 </section>

CSS

body {
    font-family: 'Helvetica Neue', Arial, sans-serif;
    -webkit-text-size-adjust: none;
    color: #333;
    max-width: 720px;
    margin: 0 auto;
    padding: 10px;
}

.container {
    width: 200px;
    height: 200px;
    position: relative;
    margin: 0 auto 40px;
    perspective: 1000px;
    color: white;
    font-size: 60px;
    font-weight: 900;
    text-align: center;
    line-height: 200px;
}

#cube {
    width: 100%;
    height: 100%;
    position: absolute;
    transform-style: preserve-3d;
    transition: transform 1s;
}

#cube figure {
    width: 196px;
    height: 196px;
    display: block;
    position: absolute;
    border: 2px solid black;
    transform: translateZ( -100px );
}

#cube .front  { 
    transform: rotateY(0deg) translateZ(100px); 
    background: red;
}

#cube .back   { 
    transform: rotateX(180deg) translateZ(100px); 
    background: yellow;
}

#cube .right  { 
    transform: rotateY(90deg) translateZ(100px); 
    background: green;
}

#cube .left   { 
    transform: rotateY(-90deg) translateZ(100px); 
    background: cyan;
}

#cube .top    { 
    transform: rotateX(90deg) translateZ(100px);
    background: blue;
}

#cube .bottom { 
    transform: rotateX(-90deg) translateZ(100px); 
    background: violet;
}

#cube.show-front  { transform: translateZ( -100px ) rotateY(     0deg ); }
#cube.show-back   { transform: translateZ( -100px ) rotateX(  -180deg ); }
#cube.show-right  { transform: translateZ( -100px ) rotateY(   -90deg ); }
#cube.show-left   { transform: translateZ( -100px ) rotateY(    90deg ); }
#cube.show-top    { transform: translateZ( -100px ) rotateX(   -90deg ); }
#cube.show-bottom { transform: translateZ( -100px ) rotateX(    90deg ); }

#options {
    position: relative;
    z-index: 100;
    margin-bottom: 40px;
}