JSFiddle - React, Tailwind, and code Playground

HTML

<div id="tridiv">
  <div class="scene">
  <div class="box">
    <div class="shape cuboid-1 top1">
      <div class="face ft">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.208);"></div>
      </div>
      <div class="face bk">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.208);"></div>
      </div>
      <div class="face rt">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.208);"></div>
      </div>
      <div class="face lt">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.208);"></div>
      </div>
      <div class="face bm">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.208);"></div>
      </div>
      <div class="face tp">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.208);"></div>
      </div>
    </div>
    <div class="shape cuboid-2 midB">
      <div class="face ft">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.208);"></div>
      </div>
      <div class="face bk">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.208);"></div>
      </div>
      <div class="face rt">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.208);"></div>
      </div>
      <div class="face lt">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.208);"></div>
      </div>
      <div class="face bm">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.208);"></div>
      </div>
      <div class="face tp">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.208);"></div>
      </div>
    </div>
    <div class="shape prism-1 angleR">
      <div class="face ft">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.106);"></div>
      </div>
      <div class="face bk">
        <div class="photon-shader" style="background-color: rgba(0,...

CSS

html {
  overflow: hidden;
}
#tridiv {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  perspective: 800px;
  overflow: hidden;
  background: #e8a422;
  font-size: 100%;
}
.box {
  position: absolute;
  transform-style: preserve-3d;
  transform: rotateX(-100deg) rotateY(93deg);
  margin: auto;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  zoom: 40%;
}
.scene, .shape, .face, .face-wrapper, .cr {
  position: absolute;
  transform-style: preserve-3d;
}
.scene {
  width: 80em;
  height: 80em;
  top: 50%;
  left: 50%;
  margin: -40em 0 0 -40em;
  transform: rotateX(80deg) rotateY(0deg);
}
.shape {
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  transform-origin: 50%;
}
.face, .face-wrapper {
  overflow: hidden;
  transform-origin: 0 0;
  backface-visibility: hidden;
}
.face {
  background-size: 100% 100%!important;
  background-position: center;
}
.face-wrapper .face {
  left: 100%;
  width: 100%;
  height: 100%;
}
.photon-shader {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}
.side {
  left: 50%;
}
.cr, .cr .side {
  height: 100%;
}
[class*="cuboid"] .ft, [class*="cuboid"] .bk {
  width: 100%;
  height: 100%;
}
[class*="cuboid"] .bk {
  left: 100%;
}
[class*="cuboid"] .rt {
  transform: rotateY(-90deg) translateX(-50%);
}
[class*="cuboid"] .lt {
  transform: rotateY(90deg) translateX(-50%);
}
[class*="cuboid"] .tp {
  transform: rotateX(90deg) translateY(-50%);
}
[class*="cuboid"] .bm {
  transform: rotateX(-90deg) translateY(-50%);
}
[class*="cuboid"] .lt {
  left: 100%;
}
[class*="cuboid"] .bm {
  top: 100%;
}
[class*="prism"] .ft, [class*="prism"] .bk {
  width: 100%;
  height: 100%;
}
[class*="prism"] .bk {
  left: 100%;
}
[class*="prism"] .rt {
  transform: rotateY(-90deg) translateX(-50%);
}
[class*="prism"] .lt {
  transform: rotateY(90deg) translateX(-50%);
}
[class*="prism"] .bm {
  transform: rotateX(-90deg) translateY(-50%);
}
[class*="prism"] .lt {
  left: 100%;
}
[class*="prism"] .bm {
  top:...

JavaScript

$(document).ready(function()
{
  $('.box').clone().appendTo('.scene');
  var $th = $('.box'),
  box1 = $th.get(0),
  box2 = $th.get(1);
  $(box1).css('left', box1.offsetLeft+(-1000)+'px');
  $(box2).css({left: box2.offsetLeft+(1000)+'px', transform: 'rotateX(-100deg) rotateY(270deg)'});
  setInterval(function()
  {
    $(box1).css('left', box1.offsetLeft+(10)+'px');
    $(box2).css('left', box2.offsetLeft+(-10)+'px');
  }, 0);
});