JSFiddle - React, Tailwind, and code Playground

by Michael Prosser

HTML

<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

.container {
  width: 200px;
  height: 200px;
  position: relative;
  -webkit-perspective: 1000px;
}

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

#cube figure {
  width: 196px;
  height: 196px;
  display: block;
  position: absolute;
    top:100px;
    left:100px;
  border: 2px solid black;
}
#cube .front  { background-color:#333333; -webkit-transform: translateZ(100px) rotateY(   0deg ); }
#cube .back   { background-color:#999999; -webkit-transform: translateZ(-100px) rotateX( 180deg ); }
#cube .right  { background-color:#666666; -webkit-transform: translateX(100px) rotateY(  90deg ); }
#cube .left   { background-color:#cccccc; -webkit-transform: translateX(-100px) rotateY( -90deg ); }
#cube .top    { background-color:#333333; -webkit-transform: translateY(-100px) rotateX(  90deg ); }
#cube .bottom { background-color:#666666; -webkit-transform: translateY(100px) rotateX( -90deg ); }

#cube { -webkit-transform: rotateX( -45deg ) rotateY( -45deg ); }