html, body {
  height: 100%;
}

body {
  overflow: hidden;
  margin: 0;
  perspective: 82.5em;
  perspective-origin: 50% calc(50% - 60em);
  background: dimgrey;
}

.assembly {
  transform: rotateY(-45deg);
  animation: rot 9s ease-in-out infinite;
}
.assembly, .assembly *, .assembly :before {
  box-sizing: border-box;
  position: absolute;
  top: 50%;
  left: 50%;
  transform-style: preserve-3d;
}

.d-segment:nth-child(1) {
  transform: rotate3d(-1, 0, 0, 90deg) translate3d(-5em, 1.25em, 5em);
}
.d-segment:nth-child(2) {
  transform: rotate3d(0, 0, 0, 90deg) translate3d(-5em, 1.25em, 5em);
}
.d-segment:nth-child(3) {
  transform: rotate3d(0, 0, 1, 90deg) translate3d(-5em, 1.25em, 5em);
}
.d-segment:last-child .face:nth-child(odd):nth-child(-n + 4) {
  margin-top: -2.5em;
  height: 7.5em;
}
.d-segment:last-child .face:nth-child(odd):nth-child(-n + 4):before {
  margin: -6.25em -1.25em;
  width: 2.5em;
  height: 2.5em;
  content: '';
}
.d-segment:last-child .face:nth-child(1):before {
  border-left: solid 1px;
  background: linear-gradient(45deg, #dcdcdc calc(50% - 1px), #000000 calc(50% - 1px), #000000 50%, rgba(0, 0, 0, 0) 50%);
}
.d-segment:last-child .face:nth-child(3):before {
  border-right: solid 1px;
  background: linear-gradient(-45deg, #dcdcdc calc(50% - 1px), #000000 calc(50% - 1px), #000000 50%, rgba(0, 0, 0, 0) 50%);
}
.d-segment:last-child .face:nth-child(5) {
  margin-left: -1.76777em;
  width: 3.53553em;
  transform: rotateX(90deg) translateZ(3.75em) rotateY(45deg);
}

.face {
  margin: -5em -1.25em;
  border: solid 1px;
  width: 2.5em;
  height: 10em;
  backface-visibility: hidden;
  background: linear-gradient(#000000 1px, #dcdcdc 1px) 0 0 / 2.5em 2.5em border-box;
}
.face:nth-child(1) {
  transform: rotateY(0deg) translateZ(1.25em);
}
.face:nth-child(2) {
  transform: rotateY(90deg) translateZ(1.25em);
}
.face:nth-child(3) {
  transform: rotateY(180deg) translateZ(1.25em);
}
.face:nth-child(4) {
  transform: rotateY(270deg) translateZ(1.25em);
}
.face:nth-child(5) {
  transform: rotateX(90deg) translateZ(5em);
}
.face:nth-child(6) {
  transform: rotateX(-90deg) translateZ(5em);
}
.face:nth-last-child(-n + 2) {
  margin-top: -1.25em;
  height: 2.5em;
}

@keyframes rot {
  to {
    transform: rotateY(315deg);
  }
}
