CodePen Embed - Pyramid model from tridiv

<div id="tridiv">
  <div class="scene" style="-webkit-transform:rotateX(-23deg) rotateY(305deg); -moz-transform:rotateX(-23deg) rotateY(305deg); -ms-transform:rotateX(-23deg) rotateY(305deg); transform:rotateX(-23deg) rotateY(305deg); ">
    <div class="shape cuboid-1 cub-1">
      <div class="face ft">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.14);"></div>
      </div>
      <div class="face bk">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.14);"></div>
      </div>
      <div class="face rt">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.14);"></div>
      </div>
      <div class="face lt">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.14);"></div>
      </div>
      <div class="face bm">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.14);"></div>
      </div>
      <div class="face tp">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.14);"></div>
      </div>
    </div>
    <div class="shape cuboid-2 cub-2">
      <div class="face ft">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.14);"></div>
      </div>
      <div class="face bk">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.14);"></div>
      </div>
      <div class="face rt">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.14);"></div>
      </div>
      <div class="face lt">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.14);"></div>
      </div>
      <div class="face bm">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.14);"></div>
      </div>
      <div class="face tp">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.14);"></div>
      </div>
    </div>
    <div class="shape cuboid-3 cub-3">
      <div class="face ft">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.14);"></div>
      </div>
      <div class="face bk">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.14);"></div>
      </div>
      <div class="face rt">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.14);"></div>
      </div>
      <div class="face lt">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.14);"></div>
      </div>
      <div class="face bm">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.14);"></div>
      </div>
      <div class="face tp">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.14);"></div>
      </div>
    </div>
    <div class="shape cuboid-4 cub-4">
      <div class="face ft">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.14);"></div>
      </div>
      <div class="face bk">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.14);"></div>
      </div>
      <div class="face rt">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.14);"></div>
      </div>
      <div class="face lt">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.14);"></div>
      </div>
      <div class="face bm">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.14);"></div>
      </div>
      <div class="face tp">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.14);"></div>
      </div>
    </div>
    <div class="shape cuboid-5 cub-5">
      <div class="face ft">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.14);"></div>
      </div>
      <div class="face bk">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.14);"></div>
      </div>
      <div class="face rt">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.14);"></div>
      </div>
      <div class="face lt">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.14);"></div>
      </div>
      <div class="face bm">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.14);"></div>
      </div>
      <div class="face tp">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.14);"></div>
      </div>
    </div>
    <div class="shape prism-1 pri-1">
      <div class="face ft">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.098);"></div>
      </div>
      <div class="face bk">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.14);"></div>
      </div>
      <div class="face-wrapper rt">
        <div class="face">
          <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.14);"></div>
        </div>
      </div>
      <div class="face-wrapper lt">
        <div class="face">
          <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.14);"></div>
        </div>
      </div>
      <div class="face bm">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.14);"></div>
      </div>
    </div>
    <div class="shape cuboid-6 cub-6">
      <div class="face ft">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.14);"></div>
      </div>
      <div class="face bk">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.14);"></div>
      </div>
      <div class="face rt">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.14);"></div>
      </div>
      <div class="face lt">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.14);"></div>
      </div>
      <div class="face bm">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.14);"></div>
      </div>
      <div class="face tp">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.14);"></div>
      </div>
    </div>
    <div class="shape cuboid-7 cub-7">
      <div class="face ft">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.14);"></div>
      </div>
      <div class="face bk">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.14);"></div>
      </div>
      <div class="face rt">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.14);"></div>
      </div>
      <div class="face lt">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.14);"></div>
      </div>
      <div class="face bm">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.14);"></div>
      </div>
      <div class="face tp">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.14);"></div>
      </div>
    </div>
    <div class="shape cuboid-8 cub-8">
      <div class="face ft">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.14);"></div>
      </div>
      <div class="face bk">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.14);"></div>
      </div>
      <div class="face rt">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.14);"></div>
      </div>
      <div class="face lt">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.14);"></div>
      </div>
      <div class="face bm">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.14);"></div>
      </div>
      <div class="face tp">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.14);"></div>
      </div>
    </div>
    <div class="shape prism-2 pri-2">
      <div class="face ft">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.098);"></div>
      </div>
      <div class="face bk">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.14);"></div>
      </div>
      <div class="face-wrapper rt">
        <div class="face">
          <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.14);"></div>
        </div>
      </div>
      <div class="face-wrapper lt">
        <div class="face">
          <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.14);"></div>
        </div>
      </div>
      <div class="face bm">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.14);"></div>
      </div>
    </div>
    <div class="shape prism-3 pri-3">
      <div class="face ft">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.098);"></div>
      </div>
      <div class="face bk">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.14);"></div>
      </div>
      <div class="face-wrapper rt">
        <div class="face">
          <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.14);"></div>
        </div>
      </div>
      <div class="face-wrapper lt">
        <div class="face">
          <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.14);"></div>
        </div>
      </div>
      <div class="face bm">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.14);"></div>
      </div>
    </div>
    <div class="shape prism-4 pri-4">
      <div class="face ft">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.098);"></div>
      </div>
      <div class="face bk">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.14);"></div>
      </div>
      <div class="face-wrapper rt">
        <div class="face">
          <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.14);"></div>
        </div>
      </div>
      <div class="face-wrapper lt">
        <div class="face">
          <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.14);"></div>
        </div>
      </div>
      <div class="face bm">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.14);"></div>
      </div>
    </div>
    <div class="shape cuboid-9 cub-9">
      <div class="face ft">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.14);"></div>
      </div>
      <div class="face bk">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.14);"></div>
      </div>
      <div class="face rt">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.14);"></div>
      </div>
      <div class="face lt">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.14);"></div>
      </div>
      <div class="face bm">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.14);"></div>
      </div>
      <div class="face tp">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.14);"></div>
      </div>
    </div>
    <div class="shape cuboid-10 cub-10">
      <div class="face ft">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.14);"></div>
      </div>
      <div class="face bk">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.14);"></div>
      </div>
      <div class="face rt">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.14);"></div>
      </div>
      <div class="face lt">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.14);"></div>
      </div>
      <div class="face bm">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.14);"></div>
      </div>
      <div class="face tp">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.14);"></div>
      </div>
    </div>
  </div>
</div>

/* /!\ You need to add vendor prefixes in order to render the CSS properly (or simply use http://leaverou.github.io/prefixfree/) /!\ */ #tridiv {
  perspective: 800px;
  position: absolute;
  overflow: hidden;
  width: 100%;
  height: 100%;
  background: transparent;
  font-size: 62.5%;
}
.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*="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: 100%;
}
[class*="prism"] .rt .face {
  left: -100%;
  transform-origin: 100% 0;
}
/* .cub-1 styles */
.cub-1 {
  transform:translate3D(0em, -0.5em, 0em) rotateX(90deg) rotateY(0deg) rotateZ(0deg);
  opacity:1;
  width:16em;
  height:16em;
  margin:-8em 0 0 -8em;
}
.cub-1 .ft {
  transform:translateZ(0.5em);
}
.cub-1 .bk {
  transform:translateZ(-0.5em) rotateY(180deg);
}
.cub-1 .rt, .cub-1 .lt {
  width:1em;
  height:16em;
}
.cub-1 .tp, .cub-1 .bm {
  width:16em;
  height:1em;
}
.cub-1 .face {
  background-color:#65604b;
}
.cub-1 .ft {
  background-color:#c7bfa4;
}
.cub-1 .bk {
  background-color:#65604b;
}
.cub-1 .tp {
  background-color:#65604b;
}
.cub-1 .lt {
  background-color:#65604b;
}
.cub-1 .rt {
  background-color:#65604b;
}
/* .cub-2 styles */
.cub-2 {
  transform:translate3D(0em, -2.5em, 0em) rotateX(90deg) rotateY(0deg) rotateZ(0deg);
  opacity:1;
  width:12em;
  height:12em;
  margin:-6em 0 0 -6em;
}
.cub-2 .ft {
  transform:translateZ(0.5em);
}
.cub-2 .bk {
  transform:translateZ(-0.5em) rotateY(180deg);
}
.cub-2 .rt, .cub-2 .lt {
  width:1em;
  height:12em;
}
.cub-2 .tp, .cub-2 .bm {
  width:12em;
  height:1em;
}
.cub-2 .face {
  background-color:#65604b;
}
.cub-2 .ft {
  background-color:#c7bfa4;
}
/* .cub-3 styles */
.cub-3 {
  transform:translate3D(0em, -3.5em, 0em) rotateX(90deg) rotateY(0deg) rotateZ(0deg);
  opacity:1;
  width:10em;
  height:10em;
  margin:-5em 0 0 -5em;
}
.cub-3 .ft {
  transform:translateZ(0.5em);
}
.cub-3 .bk {
  transform:translateZ(-0.5em) rotateY(180deg);
}
.cub-3 .rt, .cub-3 .lt {
  width:1em;
  height:10em;
}
.cub-3 .tp, .cub-3 .bm {
  width:10em;
  height:1em;
}
.cub-3 .face {
  background-color:#65604b;
}
.cub-3 .ft {
  background-color:#c7bfa4;
}
/* .cub-4 styles */
.cub-4 {
  transform:translate3D(0em, -1.5em, 0em) rotateX(90deg) rotateY(0deg) rotateZ(0deg);
  opacity:1;
  width:14em;
  height:14em;
  margin:-7em 0 0 -7em;
}
.cub-4 .ft {
  transform:translateZ(0.5em);
}
.cub-4 .bk {
  transform:translateZ(-0.5em) rotateY(180deg);
}
.cub-4 .rt, .cub-4 .lt {
  width:1em;
  height:14em;
}
.cub-4 .tp, .cub-4 .bm {
  width:14em;
  height:1em;
}
.cub-4 .face {
  background-color:#65604b;
}
.cub-4 .ft {
  background-color:#c7bfa4;
}
/* .cub-5 styles */
.cub-5 {
  transform:translate3D(0em, -4.5em, 0em) rotateX(90deg) rotateY(0deg) rotateZ(0deg);
  opacity:1;
  width:8em;
  height:8em;
  margin:-4em 0 0 -4em;
}
.cub-5 .ft {
  transform:translateZ(0.5em);
}
.cub-5 .bk {
  transform:translateZ(-0.5em) rotateY(180deg);
}
.cub-5 .rt, .cub-5 .lt {
  width:1em;
  height:8em;
}
.cub-5 .tp, .cub-5 .bm {
  width:8em;
  height:1em;
}
.cub-5 .face {
  background-color:#65604b;
}
.cub-5 .ft {
  background-color:#c7bfa4;
}
/* .pri-1 styles */
.pri-1 {
  transform:translate3D(5.5em, -3.5em, 0em) rotateX(0deg) rotateY(90deg) rotateZ(0deg);
  opacity:1;
  width:4em;
  height:7em;
  margin:-3.5em 0 0 -2em;
}
.pri-1 .rt .face {
  transform:rotateZ(-45deg);
}
.pri-1 .lt .face {
  transform:rotateZ(45deg);
}
.pri-1 .ft {
  height:9.899494936611665em;
  transform:translateZ(-3.5em) rotateX(45deg);
}
.pri-1 .bk {
  transform:translateZ(-3.5em) rotateY(180deg);
}
.pri-1 .rt, .pri-1 .lt {
  width:7em;
  height:7em;
}
.pri-1 .rt .face, .pri-1 .lt .face {
  height:9.899494936611665em;
}
.pri-1 .bm {
  width:4em;
  height:7em;
}
.pri-1 .face {
  background-color:#c7bfa4;
}
.pri-1 .bk {
  background-color:#797254;
}
.pri-1 .bm {
  background-color:#797254;
}
.pri-1 .lt > div {
  background-color:#797254;
}
.pri-1 .rt > div {
  background-color:#797254;
}
/* .cub-6 styles */
.cub-6 {
  transform:translate3D(0em, -5.5em, 0em) rotateX(90deg) rotateY(0deg) rotateZ(0deg);
  opacity:1;
  width:6em;
  height:6em;
  margin:-3em 0 0 -3em;
}
.cub-6 .ft {
  transform:translateZ(0.5em);
}
.cub-6 .bk {
  transform:translateZ(-0.5em) rotateY(180deg);
}
.cub-6 .rt, .cub-6 .lt {
  width:1em;
  height:6em;
}
.cub-6 .tp, .cub-6 .bm {
  width:6em;
  height:1em;
}
.cub-6 .face {
  background-color:#65604b;
}
.cub-6 .ft {
  background-color:#c7bfa4;
}
/* .cub-7 styles */
.cub-7 {
  transform:translate3D(0em, -6.5em, 0em) rotateX(90deg) rotateY(0deg) rotateZ(0deg);
  opacity:1;
  width:4em;
  height:4em;
  margin:-2em 0 0 -2em;
}
.cub-7 .ft {
  transform:translateZ(0.5em);
}
.cub-7 .bk {
  transform:translateZ(-0.5em) rotateY(180deg);
}
.cub-7 .rt, .cub-7 .lt {
  width:1em;
  height:4em;
}
.cub-7 .tp, .cub-7 .bm {
  width:4em;
  height:1em;
}
.cub-7 .face {
  background-color:#c7bfa4;
}
/* .cub-8 styles */
.cub-8 {
  transform:translate3D(0em, -8em, 0em) rotateX(90deg) rotateY(0deg) rotateZ(0deg);
  opacity:1;
  width:2.5em;
  height:2.5em;
  margin:-1.25em 0 0 -1.25em;
}
.cub-8 .ft {
  transform:translateZ(1em);
}
.cub-8 .bk {
  transform:translateZ(-1em) rotateY(180deg);
}
.cub-8 .rt, .cub-8 .lt {
  width:2em;
  height:2.5em;
}
.cub-8 .tp, .cub-8 .bm {
  width:2.5em;
  height:2em;
}
.cub-8 .face {
  background-color:#a19c87;
}
.cub-8 .ft {
  background-color:#c7bfa4;
}
.cub-8 .bk {
  background-color:#c7bfa4;
}
.cub-8 .tp {
  background-color:#c7bfa4;
}
.cub-8 .lt {
  background-color:#c7bfa4;
}
.cub-8 .rt {
  background-color:#c7bfa4;
}
/* .pri-2 styles */
.pri-2 {
  transform:translate3D(0em, -3.51em, 5.5em) rotateX(0deg) rotateY(0deg) rotateZ(0deg);
  opacity:1;
  width:4em;
  height:7em;
  margin:-3.5em 0 0 -2em;
}
.pri-2 .rt .face {
  transform:rotateZ(-45deg);
}
.pri-2 .lt .face {
  transform:rotateZ(45deg);
}
.pri-2 .ft {
  height:9.899494936611665em;
  transform:translateZ(-3.5em) rotateX(45deg);
}
.pri-2 .bk {
  transform:translateZ(-3.5em) rotateY(180deg);
}
.pri-2 .rt, .pri-2 .lt {
  width:7em;
  height:7em;
}
.pri-2 .rt .face, .pri-2 .lt .face {
  height:9.899494936611665em;
}
.pri-2 .bm {
  width:4em;
  height:7em;
}
.pri-2 .face {
  background-color:#797254;
}
.pri-2 .ft {
  background-color:#c7bfa4;
}
/* .pri-3 styles */
.pri-3 {
  transform:translate3D(0em, -3.5em, -5.5em) rotateX(0deg) rotateY(180deg) rotateZ(0deg);
  opacity:1;
  width:4em;
  height:7em;
  margin:-3.5em 0 0 -2em;
}
.pri-3 .rt .face {
  transform:rotateZ(-45deg);
}
.pri-3 .lt .face {
  transform:rotateZ(45deg);
}
.pri-3 .ft {
  height:9.899494936611665em;
  transform:translateZ(-3.5em) rotateX(45deg);
}
.pri-3 .bk {
  transform:translateZ(-3.5em) rotateY(180deg);
}
.pri-3 .rt, .pri-3 .lt {
  width:7em;
  height:7em;
}
.pri-3 .rt .face, .pri-3 .lt .face {
  height:9.899494936611665em;
}
.pri-3 .bm {
  width:4em;
  height:7em;
}
.pri-3 .face {
  background-color:#65604b;
}
.pri-3 .ft {
  background-color:#c7bfa4;
}
/* .pri-4 styles */
.pri-4 {
  transform:translate3D(-5.5em, -3.5em, 0em) rotateX(0deg) rotateY(-90deg) rotateZ(0deg);
  opacity:1;
  width:4em;
  height:7em;
  margin:-3.5em 0 0 -2em;
}
.pri-4 .rt .face {
  transform:rotateZ(-45deg);
}
.pri-4 .lt .face {
  transform:rotateZ(45deg);
}
.pri-4 .ft {
  height:9.899494936611665em;
  transform:translateZ(-3.5em) rotateX(45deg);
}
.pri-4 .bk {
  transform:translateZ(-3.5em) rotateY(180deg);
}
.pri-4 .rt, .pri-4 .lt {
  width:7em;
  height:7em;
}
.pri-4 .rt .face, .pri-4 .lt .face {
  height:9.899494936611665em;
}
.pri-4 .bm {
  width:4em;
  height:7em;
}
.pri-4 .face {
  background-color:#c7bfa4;
}
.pri-4 .bm {
  background-color:#65604b;
}
.pri-4 .lt > div {
  background-color:#65604b;
}
.pri-4 .rt > div {
  background-color:#65604b;
}
/* .cub-9 styles */
.cub-9 {
  transform:translate3D(0em, -9em, 0em) rotateX(90deg) rotateY(0deg) rotateZ(0deg);
  opacity:1;
  width:2.6em;
  height:2.6em;
  margin:-1.3em 0 0 -1.3em;
}
.cub-9 .ft {
  transform:translateZ(0.25em);
}
.cub-9 .bk {
  transform:translateZ(-0.25em) rotateY(180deg);
}
.cub-9 .rt, .cub-9 .lt {
  width:0.5em;
  height:2.6em;
}
.cub-9 .tp, .cub-9 .bm {
  width:2.6em;
  height:0.5em;
}
.cub-9 .face {
  background-color:#9c8f85;
}
.cub-9 .ft {
  background-color:#e9e2c4;
}
/* .cub-10 styles */
.cub-10 {
  transform:translate3D(0em, 0.5em, 0em) rotateX(90deg) rotateY(0deg) rotateZ(0deg);
  opacity:1;
  width:30em;
  height:30em;
  margin:-15em 0 0 -15em;
}
.cub-10 .ft {
  transform:translateZ(0.5em);
}
.cub-10 .bk {
  transform:translateZ(-0.5em) rotateY(180deg);
}
.cub-10 .rt, .cub-10 .lt {
  width:1em;
  height:30em;
}
.cub-10 .tp, .cub-10 .bm {
  width:30em;
  height:1em;
}
.cub-10 .face {
  background-color:#83a101;
}
.cub-10 .bm {
  background-color:#d7b378;
}
.cub-10 .lt {
  background-color:#d7b378;
}

This Pen is owned by BunnyPi04 on CodePen.

See more by @bunnypi04 on CodePen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.