.world
  .forward
    .box
      - for (i = 0; i < 6; i++)
        .wall
View Compiled
body {
  background: #000;
  height: 100vh;
  overflow: hidden;
  display: flex;
  font-family: 'Anton', sans-serif;
  justify-content: center;
  align-items: center;
  perspective: 1000px;
}

$wallSize: 200px;

div {
  transform-style: preserve-3d;
}
.world {
  transform: rotateX(-30deg) rotateY(-30deg);
  .forward {
    position: absolute;
    animation: slide 2000ms linear infinite;
  }
  .box {
    width: $wallSize;
    height: $wallSize;
    transform-origin: 100% 100%;
    animation: roll 2000ms cubic-bezier(1.000, 0.010, 1.000, 1.000) infinite;
    .wall {
      position: absolute;
      width: $wallSize;
      height: $wallSize;
      background: rgba(10, 10, 10, 0.9);
      border: 1px solid rgba(250, 250, 250, 1);
      box-sizing: border-box;
      &:nth-child(1) {
        transform: translateZ($wallSize / 2);
      }
      &:nth-child(2) {
        transform: rotateX(180deg) translateZ($wallSize / 2);
      }
      &:nth-child(3) {
        transform: rotateX(90deg) translateZ($wallSize / 2);
      }
      &:nth-child(4) {
        transform: rotateX(-90deg) translateZ($wallSize / 2);
      }
      &:nth-child(5) {
        transform: rotateY(90deg) translateZ($wallSize / 2);
      }
      &:nth-child(6) {
        transform: rotateY(-90deg) translateZ($wallSize / 2);
      }
    }
  }
}

@keyframes roll {
  0% {
    transform: rotateZ(0deg);
  }
  85% {
    transform: rotateZ(90deg);
  }
  87% {
    transform: rotateZ(88deg);
  }
  90% {
    transform: rotateZ(90deg);
  }
  100% {
    transform: rotateZ(90deg);
  }
}

@keyframes slide {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-$wallSize);
  }
}

External CSS

  1. https://fonts.googleapis.com/css?family=Anton

External JavaScript

This Pen doesn't use any external JavaScript resources.