JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://photon.attasi.com/js/photon.min.js"></script>
<div class="container">
  <div id="scene">
    <div id="b-t1" class="piece object-3x10">
      <div class="poly">
        <div class="ft face"></div>
        <div class="bk face"></div>
        <div class="rt face"></div>
        <div class="lt face"></div>
        <div class="tp face"></div>
      </div>
    </div>
  </div>
</div>

CSS

* { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; }

body { 
  font-size: 100%; 
  background-color: #F1F2F3;
}

.container {
  font-size: 500%;
  position: absolute;
  left: 50%;
  top: 50%;
  width: 8em;
  height: 8em;
  margin: -4em 0 0 -4em;
  -webkit-perspective: 1000px;
}

#scene { 
  width: 100%;
  height: 100%;
  -webkit-transform-style: preserve-3d;
  -webkit-transform: rotateX( 45deg ) rotateZ( 45deg ); 
}

#b-t1 { -webkit-transform: rotateZ( 0deg ) translateX( 0em ) translateY( 0em ) translateZ( 0em ); }

.piece {
  position: absolute;
  width: 8em;
  height: 8em;
  -webkit-transform-style: preserve-3d;
  -webkit-transform-origin: 4em;
}

.poly {
  position: absolute;
  left: 50%;
  top: 50%;
  font-size: 20%;
  -webkit-transform-style: preserve-3d;
}

.poly .face {
  position: absolute;
  -webkit-transform-origin: 0 0;
  -webkit-box-shadow: inset 0 0 .3em rgba(0, 0, 0, 0.3);
  background: red;
}

.object-3x10 .poly {
  width: 3em;
  height: 3em;
  margin: -1.5em 0 0 -1.5em;
}

.object-3x10 .tp {
  width: 3em;
  height: 3em;
  -webkit-transform: translateZ( 10em );
}

.object-3x10 .ft  {
  width: 3em;
  height: 10em;
  -webkit-transform: rotateX(90deg) translateZ(-3em);
}

.object-3x10 .bk   {
  width: 3em;
  height: 10em;
  -webkit-transform: rotateX(90deg);
}

.object-3x10 .rt {
  width: 3em;
  height: 10em;
  -webkit-transform: rotateX(89deg) rotateY(90deg);
}

.object-3x10 .lt {
  width: 3em;
  height: 10em;
  /* Replacing one of the 90deg values solve the problem */
  -webkit-transform: rotateX(90deg) rotateY(90deg) translateZ(3em);
}

JavaScript

var light = new Photon.Light( x = 45, y = -180, z = 100 ),
    scene = new Photon.FaceGroup($('#scene')[0], $('#scene .face'), 1, .15, true);

function renderPoly() {
  scene.render(light, true);
}

renderPoly();