<div id="tridiv">
  <div class="scene" style="-webkit-transform:rotateX(-20deg) rotateY(663deg); -moz-transform:rotateX(-20deg) rotateY(663deg); -ms-transform:rotateX(-20deg) rotateY(663deg); transform:rotateX(-20deg) rotateY(663deg); ">
    <div class="shape pyramid-1 pyr-1">
      <div class="face-wrapper ft">
        <div class="face">
          <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.14);"></div>
        </div>
      </div>
      <div class="face-wrapper bk">
        <div class="face">
          <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.094);"></div>
        </div>
      </div>
      <div class="face-wrapper lt">
        <div class="face">
          <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.094);"></div>
        </div>
      </div>
      <div class="face-wrapper rt">
        <div class="face">
          <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.094);"></div>
        </div>
      </div>
      <div class="face bm">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.094);"></div>
      </div>
    </div>
  </div>
</div>

body {
  background-image: linear-gradient(
    to bottom right,
    #000000,
    #2328d1,
    #7e6aff,
    #6fe2e5,
    #85f3ff,
    #9796ef
  );
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100vh;
  overflow: hidden;
} 
.face {
   background: linear-gradient(
    to bottom right,
    #000000,
    #2328d1,
    #7e6aff,
    #6fe2e5,
    #85f3ff,
    #9796ef
  );
    box-shadow: inset 0 0 20px #fff, inset 10px 0 46px #eaf5fc, inset 88px 0px 60px #c2d8fe, inset -20px -60px 100px #fde9ea, inset 0 50px 140px #fde9ea !important;
}
.shape {
   animation: roll 12s linear infinite normal;
}

@keyframes roll {
  0%,100% {      transform: rotateX(50deg) rotateY(0deg)}
 50% {    transform: rotateX(120deg) rotateY(360deg)  }
}

.photon-shader {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    background: transparent !important;
    height: 100%;
}
#tridiv {
  perspective: 800px;
  position: absolute;
  overflow: hidden;
  width: 100%;
  height: 100%;
  background: transparent;
  font-size: 375%;
}
.face {
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.4);
}
.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;
}
.shape {
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  transform-origin: 50%;
}
.face, .face-wrapper {
  overflow: hidden;
  transform-origin: 0 0;
  backface-visibility: hidden;
  /* hidden by default, prevent blinking and other weird rendering glitchs */
}
.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*="pyramid"] .face-wrapper .face {
  transform: rotateZ(45deg) translateX(-35.35%) translateY(35.35%);
}
[class*="pyramid"] .bk {
  left: 100%;
}
[class*="pyramid"] .bm {
  top: 100%;
  transform: rotateX(-90deg) translateY(-50%);
}
[class*="pyramid"] .rt, [class*="pyramid"] .lt {
  transform-origin: 50% 0;
}
/* .pyr-1 styles */
.pyr-1 {
  transform:translate3D(0em, 0em, 0em) rotateX(0deg) rotateY(0deg) rotateZ(0deg);
  opacity:1;
  width:4em;
  height:5em;
  margin:-2.5em 0 0 -2em;
}
.pyr-1 .face-wrapper {
  width:4em;
  height:2em;
}
.pyr-1 .face-wrapper .face {
  width:4em;
  height:4em;
}
.pyr-1 .ft {
  transform:scaleZ(2.692582403567252) scaleY(2.692582403567252) rotateX(21.801409486351798deg);
}
.pyr-1 .bk {
  transform:scaleZ(2.692582403567252) scaleY(2.692582403567252) rotateX(-21.801409486351798deg) rotateY(180deg);
}
.pyr-1 .rt {
  transform:scaleX(2.692582403567252) scaleY(2.692582403567252) rotateZ(21.801409486351798deg) rotateY(-90deg);
}
.pyr-1 .lt {
  transform:scaleX(2.692582403567252) scaleY(2.692582403567252) rotateZ(-21.801409486351798deg) rotateY(90deg);
}
.pyr-1 .bm {
  width:4em;
  height:4em;
}
.pyr-1 .face {
  background-color:#FFFFFF;
}