<div class="container">
  <div class="dinosaur">
    <div class="layer layer-1">
      <div class="row">
        <div class="pixel pixel-8 push-12"><i></i><i></i><i></i><i></i><i></i><i></i></div>
      </div>
      <div class="row">
        <div class="pixel pixel-2 push-11"><i></i><i></i><i></i><i></i><i></i><i></i></div>
        <div class="pixel pixel-7 push-1"><i></i><i></i><i></i><i></i><i></i><i></i></div>
      </div>
      <div class="row">
        <div class="pixel pixel-10 push-11"><i></i><i></i><i></i><i></i><i></i><i></i></div>
      </div>
      <div class="row">
        <div class="pixel pixel-10 push-11"><i></i><i></i><i></i><i></i><i></i><i></i></div>
      </div>
      <div class="row">
        <div class="pixel pixel-10 push-11"><i></i><i></i><i></i><i></i><i></i><i></i></div>
      </div>
      <div class="row">
        <div class="pixel pixel-5 push-11"><i></i><i></i><i></i><i></i><i></i><i></i></div>
      </div>
      <div class="row">
        <div class="pixel pixel-8 push-11"><i></i><i></i><i></i><i></i><i></i><i></i></div>
      </div>
      <div class="row">
        <div class="pixel"><i></i><i></i><i></i><i></i><i></i><i></i></div>
        <div class="pixel pixel-5 push-9"><i></i><i></i><i></i><i></i><i></i><i></i></div>
      </div>
      <div class="row">
        <div class="pixel"><i></i><i></i><i></i><i></i><i></i><i></i></div>
        <div class="pixel pixel-7 push-7"><i></i><i></i><i></i><i></i><i></i><i></i></div>
      </div>
      <div class="row">
        <div class="pixel pixel-2"><i></i><i></i><i></i><i></i><i></i><i></i></div>
        <div class="pixel pixel-11 push-4"><i></i><i></i><i></i><i></i><i></i><i></i></div>
      </div>
      <div class="row">
        <div class="pixel pixel-3"><i></i><i></i><i></i><i></i><i></i><i></i></div>
        <div class="pixel pixel-11 push-1"><i></i><i></i><i></i><i></i><i></i><i></i></div>
        <div class="pixel push-1"><i></i><i></i><i></i><i></i><i></i><i></i></div>
      </div>
      <div class="row">
        <div class="pixel pixel-15"><i></i><i></i><i></i><i></i><i></i><i></i></div>
      </div>
      <div class="row">
        <div class="pixel pixel-14 push-1"><i></i><i></i><i></i><i></i><i></i><i></i></div>
      </div>
      <div class="row">
        <div class="pixel pixel-12 push-2"><i></i><i></i><i></i><i></i><i></i><i></i></div>
      </div>
      <div class="row">
        <div class="pixel pixel-11 push-3"><i></i><i></i><i></i><i></i><i></i><i></i></div>
      </div>
      <div class="row">
        <div class="pixel pixel-9 push-4"><i></i><i></i><i></i><i></i><i></i><i></i></div>
      </div>
      <div class="row">
        <div class="pixel pixel-7 push-5"><i></i><i></i><i></i><i></i><i></i><i></i></div>
      </div>
      <!-- ANIMATED START REAR -->
      <div class="row">
        <div class="pixel push-10 legs-2"><i></i><i></i><i></i><i></i><i></i><i></i></div>
        <div class="pixel"><i></i><i></i><i></i><i></i><i></i><i></i></div>
        <div class="pixel pixel legs-1"><i></i><i></i><i></i><i></i><i></i><i></i></div>
      </div>
      <div class="row">
        <div class="pixel push-11 legs-2"><i></i><i></i><i></i><i></i><i></i><i></i></div>
      </div>
      <div class="row">
        <div class="pixel push-11 legs-2"><i></i><i></i><i></i><i></i><i></i><i></i></div>
      </div>
      <div class="row">
        <div class="pixel pixel-2 push-11 legs-2"><i></i><i></i><i></i><i></i><i></i><i></i></div>
      </div>
      <!-- ANIMATED END REAR -->
    </div>
    <div class="layer layer-2">
      <div class="row">
        <div class="pixel pixel-8 push-12"><i></i><i></i><i></i><i></i><i></i><i></i></div>
      </div>
      <div class="row">
        <div class="pixel pixel-2 push-11"><i></i><i></i><i></i><i></i><i></i><i></i></div>
        <div class="pixel pixel-7 push-1"><i></i><i></i><i></i><i></i><i></i><i></i></div>
      </div>
      <div class="row">
        <div class="pixel pixel-10 push-11"><i></i><i></i><i></i><i></i><i></i><i></i></div>
      </div>
      <div class="row">
        <div class="pixel pixel-10 push-11"><i></i><i></i><i></i><i></i><i></i><i></i></div>
      </div>
      <div class="row">
        <div class="pixel pixel-10 push-11"><i></i><i></i><i></i><i></i><i></i><i></i></div>
      </div>
      <div class="row">
        <div class="pixel pixel-5 push-11"><i></i><i></i><i></i><i></i><i></i><i></i></div>
      </div>
      <div class="row">
        <div class="pixel pixel-8 push-11"><i></i><i></i><i></i><i></i><i></i><i></i></div>
      </div>
      <div class="row">
        <div class="pixel"><i></i><i></i><i></i><i></i><i></i><i></i></div>
        <div class="pixel pixel-5 push-9"><i></i><i></i><i></i><i></i><i></i><i></i></div>
      </div>
      <div class="row">
        <div class="pixel"><i></i><i></i><i></i><i></i><i></i><i></i></div>
        <div class="pixel pixel-7 push-7"><i></i><i></i><i></i><i></i><i></i><i></i></div>
      </div>
      <div class="row">
        <div class="pixel pixel-2"><i></i><i></i><i></i><i></i><i></i><i></i></div>
        <div class="pixel pixel-9 push-4"><i></i><i></i><i></i><i></i><i></i><i></i></div>
      </div>
      <div class="row">
        <div class="pixel pixel-3"><i></i><i></i><i></i><i></i><i></i><i></i></div>
        <div class="pixel pixel-11 push-1"><i></i><i></i><i></i><i></i><i></i><i></i></div>
      </div>
      <div class="row">
        <div class="pixel pixel-15"><i></i><i></i><i></i><i></i><i></i><i></i></div>
      </div>
      <div class="row">
        <div class="pixel pixel-14 push-1"><i></i><i></i><i></i><i></i><i></i><i></i></div>
      </div>
      <div class="row">
        <div class="pixel pixel-12 push-2"><i></i><i></i><i></i><i></i><i></i><i></i></div>
      </div>
      <div class="row">
        <div class="pixel pixel-11 push-3"><i></i><i></i><i></i><i></i><i></i><i></i></div>
      </div>
      <div class="row">
        <div class="pixel pixel-9 push-4"><i></i><i></i><i></i><i></i><i></i><i></i></div>
      </div>
      <div class="row">
        <div class="pixel pixel-7 push-5"><i></i><i></i><i></i><i></i><i></i><i></i></div>
      </div>
    </div>
    <div class="layer layer-3">
      <div class="row">
        <div class="pixel pixel-8 push-12"><i></i><i></i><i></i><i></i><i></i><i></i></div>
      </div>
      <div class="row">
        <div class="pixel pixel-2 push-11"><i></i><i></i><i></i><i></i><i></i><i></i></div>
        <div class="pixel pixel-7 push-1"><i></i><i></i><i></i><i></i><i></i><i></i></div>
      </div>
      <div class="row">
        <div class="pixel pixel-10 push-11"><i></i><i></i><i></i><i></i><i></i><i></i></div>
      </div>
      <div class="row">
        <div class="pixel pixel-10 push-11"><i></i><i></i><i></i><i></i><i></i><i></i></div>
      </div>
      <div class="row">
        <div class="pixel pixel-10 push-11"><i></i><i></i><i></i><i></i><i></i><i></i></div>
      </div>
      <div class="row">
        <div class="pixel pixel-5 push-11"><i></i><i></i><i></i><i></i><i></i><i></i></div>
      </div>
      <div class="row">
        <div class="pixel pixel-8 push-11"><i></i><i></i><i></i><i></i><i></i><i></i></div>
      </div>
      <div class="row">
        <div class="pixel"><i></i><i></i><i></i><i></i><i></i><i></i></div>
        <div class="pixel pixel-5 push-9"><i></i><i></i><i></i><i></i><i></i><i></i></div>
      </div>
      <div class="row">
        <div class="pixel"><i></i><i></i><i></i><i></i><i></i><i></i></div>
        <div class="pixel pixel-7 push-7"><i></i><i></i><i></i><i></i><i></i><i></i></div>
      </div>
      <div class="row">
        <div class="pixel pixel-2"><i></i><i></i><i></i><i></i><i></i><i></i></div>
        <div class="pixel pixel-11 push-4"><i></i><i></i><i></i><i></i><i></i><i></i></div>
      </div>
      <div class="row">
        <div class="pixel pixel-3"><i></i><i></i><i></i><i></i><i></i><i></i></div>
        <div class="pixel pixel-11 push-1"><i></i><i></i><i></i><i></i><i></i><i></i></div>
        <div class="pixel push-1"><i></i><i></i><i></i><i></i><i></i><i></i></div>
      </div>
      <div class="row">
        <div class="pixel pixel-15"><i></i><i></i><i></i><i></i><i></i><i></i></div>
      </div>
      <div class="row">
        <div class="pixel pixel-14 push-1"><i></i><i></i><i></i><i></i><i></i><i></i></div>
      </div>
      <div class="row">
        <div class="pixel pixel-12 push-2"><i></i><i></i><i></i><i></i><i></i><i></i></div>
      </div>
      <div class="row">
        <div class="pixel pixel-11 push-3"><i></i><i></i><i></i><i></i><i></i><i></i></div>
      </div>
      <div class="row">
        <div class="pixel pixel-9 push-4"><i></i><i></i><i></i><i></i><i></i><i></i></div>
      </div>
      <div class="row">
        <div class="pixel pixel-7 push-5"><i></i><i></i><i></i><i></i><i></i><i></i></div>
      </div>
      <!-- ANIMATED START FRONT -->
      <div class="row">
        <div class="pixel pixel-2 push-6"><i></i><i></i><i></i><i></i><i></i><i></i></div>
        <div class="pixel legs-1"><i></i><i></i><i></i><i></i><i></i><i></i></div>
      </div>
      <div class="row">
        <div class="pixel push-6 legs-1"><i></i><i></i><i></i><i></i><i></i><i></i></div>
        <div class="pixel"><i></i><i></i><i></i><i></i><i></i><i></i></div>
        <div class="pixel legs-2"><i></i><i></i><i></i><i></i><i></i><i></i></div>
      </div>
      <div class="row">
        <div class="pixel push-6 legs-1"><i></i><i></i><i></i><i></i><i></i><i></i></div>
      </div>
      <div class="row">
        <div class="pixel pixel-2 push-6 legs-1"><i></i><i></i><i></i><i></i><i></i><i></i></div>
      </div>
      <!-- ANIMATED END FRONT -->
    </div>
  </div>
</div>

:root {
  --pixel-color-front: #4f4f4f;
  --pixel-color-side1: #6b6b6b;
  --pixel-color-side2: #202020;
  --pixel-color-bottom: #323232;
  --pixel-color-top: #5f5f5f;
  --pixel-size: 10px;
  --pixel-half: calc(var(--pixel-size) / 2);
  --pixel-half-m: calc(var(--pixel-half) * -1);
  --canvas-size: calc(var(--pixel-size) * 21);
  --animate-time: 500ms;
  --animate-delay: calc(var(--animate-time) / 2);
  --going-around-time: 8000ms;
  --x-rotation: -25deg;
  --perspective: calc(var(--pixel-size) * 20);
}

.container {
  background-color: #d4d4d4;
  width: 100vw;
  height: 100vh;
  padding: 0;
  margin: 0;
}

.container {
  display: flex;
  align-items: center;
  justify-content: center;
  perspective: var(--perspective);
}

.dinosaur {
  width: var(--canvas-size);
  height: var(--canvas-size);
  position: relative;
  transform-style: preserve-3d;
  animation: going-around var(--going-around-time) linear infinite;
}

@keyframes going-around {
  0% {
    transform:
      translateX(0px)
      translateZ(0px)
      rotateY(0deg)
    ;
  }
  25% {
    transform:
      translateX(calc(var(--canvas-size) / 2))
      translateZ(calc(var(--canvas-size) / -2))
      rotateY(90deg)
    ;
  }
  50% {
    transform:
      translateX(0px)
      translateZ(calc(var(--canvas-size) / -1))
      rotateY(180deg)
    ;
  }
  75% {
    transform:
      translateX(calc(var(--canvas-size) / -2))
      translateZ(calc(var(--canvas-size) / -2))
      rotateY(270deg)
    ;
  }
  100% {
    transform:
      translateX(0px)
      translateZ(0px)
      rotateY(360deg);
  }
}

.layer {
  width: var(--canvas-size);
  height: var(--canvas-size);
  position: absolute;
  top: 0;
  left: 0;
  transform-style: preserve-3d;
}

.layer-2 {
  transform: translateZ(var(--pixel-size));
}

.layer-3 {
  transform: translateZ(calc(var(--pixel-size) * 2));
}

.row {
  width: var(--canvas-size);
  height: var(--pixel-size);
  display: flex;
  transform-style: preserve-3d;
}

.pixel {
  width: var(--pixel-size);
  height: var(--pixel-size);
  position: relative;
  transform-style: preserve-3d;
  backface-visibility: visible;
}

.pixel i {
  width: 100%;
  height: var(--pixel-size);
  position: absolute;
  top: 0;
  backface-visibility: visible;
}

.pixel i:nth-child(1) {
  background-color: var(--pixel-color-front);
  left: 0;
}

.pixel i:nth-child(2) {
  background-color: var(--pixel-color-side2);
  width: var(--pixel-size);
  left: 0;
  transform: rotateY(90deg) translateX(var(--pixel-half-m)) translateZ(var(--pixel-half-m));
}

.pixel i:nth-child(3) {
  background-color: var(--pixel-color-side1);
  width: var(--pixel-size);
  right: 0;
  transform: rotateY(90deg) translateX(var(--pixel-half-m)) translateZ(var(--pixel-half));
}

.pixel i:nth-child(4) {
  background-color: var(--pixel-color-front);
  left: 0;
  transform: translateZ(var(--pixel-size));
}

.pixel i:nth-child(5) {
  background-color: var(--pixel-color-top);
  left: 0;
  transform: rotateX(90deg) translateY(var(--pixel-half)) translateZ(var(--pixel-half));
}

.pixel i:nth-child(6) {
  background-color: var(--pixel-color-bottom);
  left: 0;
  transform: rotateX(90deg) translateY(var(--pixel-half)) translateZ(var(--pixel-half-m));
}

.pixel-2 {
  width: calc(var(--pixel-size) * 2);
}

.pixel-3 {
  width: calc(var(--pixel-size) * 3);
}

.pixel-4 {
  width: calc(var(--pixel-size) * 4);
}

.pixel-5 {
  width: calc(var(--pixel-size) * 5);
}

.pixel-6 {
  width: calc(var(--pixel-size) * 6);
}

.pixel-7 {
  width: calc(var(--pixel-size) * 7);
}

.pixel-8 {
  width: calc(var(--pixel-size) * 8);
}

.pixel-9 {
  width: calc(var(--pixel-size) * 9);
}

.pixel-10 {
  width: calc(var(--pixel-size) * 10);
}

.pixel-11 {
  width: calc(var(--pixel-size) * 11);
}

.pixel-12 {
  width: calc(var(--pixel-size) * 12);
}

.pixel-13 {
  width: calc(var(--pixel-size) * 13);
}

.pixel-14 {
  width: calc(var(--pixel-size) * 14);
}

.pixel-15 {
  width: calc(var(--pixel-size) * 15);
}

.push-1 {
  margin-left: var(--pixel-size);
}

.push-2 {
  margin-left: calc(var(--pixel-size) * 2);
}

.push-3 {
  margin-left: calc(var(--pixel-size) * 3);
}

.push-4 {
  margin-left: calc(var(--pixel-size) * 4);
}

.push-5 {
  margin-left: calc(var(--pixel-size) * 5);
}

.push-6 {
  margin-left: calc(var(--pixel-size) * 6);
}

.push-7 {
  margin-left: calc(var(--pixel-size) * 7);
}

.push-8 {
  margin-left: calc(var(--pixel-size) * 8);
}

.push-9 {
  margin-left: calc(var(--pixel-size) * 9);
}

.push-10 {
  margin-left: calc(var(--pixel-size) * 10);
}

.push-11 {
  margin-left: calc(var(--pixel-size) * 11);
}

.push-12 {
  margin-left: calc(var(--pixel-size) * 12);
}

.legs-1 {
  animation: legs var(--animate-time) steps(1, end) infinite;
}

.legs-2 {
  visibility: hidden;
  animation: legs var(--animate-time) steps(1, end) infinite var(--animate-delay);
}

@keyframes legs {
  0% {
    visibility: visible;
  }
  50% {
    visibility: hidden;
  }
}