.container
  - for (i = 0; i < 121; i++)
    .trigger
  .monitor
    .monitor_guide.o-x
    .monitor_guide.o-y
    .monitor_guide.o-z

    <div class="dice">
      <div class="wall -no1">1</div>
      <div class="wall -no2">2</div>
      <div class="wall -no3">3</div>
      <div class="wall -no4">4</div>
      <div class="wall -no5">5</div>
      <div class="wall -no6">6</div>
    </div>

* {
  transform-style: preserve-3d;
}

.dice {
  width: 100%;
  height: 100%;
}

.wall {
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 6rem;
  color: #fff;
  position: absolute;
  top: calc(50% - 100px);
  left: calc(50% - 100px);
  width: 200px;
  height: 200px;
  background: linear-gradient(45deg, rgba(royalblue, 0.8), skyblue);
}

.-no1 {
  transform: translateZ(100px);
}

.-no2 {
  transform: rotateY(90deg) translateZ(100px);
}

.-no3 {
  transform: rotateX(90deg) translateZ(100px);
}

.-no4 {
  transform: rotateX(-90deg) translateZ(100px);
}

.-no5 {
  transform: rotateY(-90deg) translateZ(100px);
}

.-no6 {
  transform: rotateY(180deg) translateZ(100px);
}


























































































body {
  background: radial-gradient(ellipse at bottom, #1b2735 0%, #090a0f 100%);
  height: 100vh;
  overflow: hidden;
  display: flex;
  font-family: 'Anton', sans-serif;
  justify-content: center;
  align-items: center;
  perspective: 800px;
}

.container {
  position: relative;
  display: grid;
  grid-template-rows: repeat(11, 10vh);
  grid-template-columns: repeat(11, 10vw);
  transform-style: preserve-3d;
}

.trigger {
  // border: 1px solid red;
  
  @for $i from 1 through 11 {
    @for $j from 1 through 11 {
      $key: ($i - 1) * 11 + $j;
      &:nth-child(#{$key}) {
        &:hover ~ .monitor {
          transform: rotateX(($i - 6) * -25deg) rotateY(($j - 6) * 25deg);
        }
      }
    }
  }
}

.monitor {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  transition: 500ms;
  transform-style: preserve-3d;
  
  &_guide {
    position: absolute;
    top: 50%;
    left: 25%;
    width: 50%;
    border: 1px dashed #fff;
    
    &::before {
      content: '';
      position: absolute;
      width: 20px;
      height: 20px;
      border-top: 1px dashed #fff;
      border-right: 1px dashed #fff;
    }
    
    &.o-x {
      &::before {
        top: -10px;
        right: 0;
        transform: rotateZ(45deg);
      }
    }
    
    &.o-y {
      left: 50%;
      top: 25%;
      width: 0;
      height: 50%;
      
      &::before {
        bottom: 0;
        right: -10px;
        transform: rotateZ(135deg);
      }
    }
    
    &.o-z {
      transform: rotateY(90deg);
      
      &::before {
        top: -10px;
        left: 0;
        transform: rotateZ(-135deg);
      }
    }
  }
}

.demo {
  position: absolute;
  top: calc(50% - 50px);
  left: calc(50% - 50px);
  width: 100px;
  height: 100px;
  background: rgba(yellow, 0.7);
  transition: 1000ms;
}