.container
  - for (i = 0; i < 121; i++)
    .trigger
  .monitor
    //- .demo
    //- .monitor_guide.o-x
    //- .monitor_guide.o-y
    //- .monitor_guide.o-z
    //- Your element start
    .dice
      .dice_wall 1
      .dice_wall 2
      .dice_wall 3
      .dice_wall 4
      .dice_wall 5
      .dice_wall 6
    //- Your element end
View Compiled
// .demo {
//   transform: translate3d(0px, 0px, 0px);
// }

.dice {
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  
  &_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);
    // backface-visibility: hidden;

    &:nth-child(1) {
      transform: translateZ(100px);
    }
    
    &:nth-child(2) {
      transform: rotateY(90deg) translateZ(100px);
    }
    
    &:nth-child(3) {
      transform: rotateX(90deg) translateZ(100px);
    }
    
    &:nth-child(4) {
      transform: rotateX(-90deg) translateZ(100px);
    }
    
    &:nth-child(5) {
      transform: rotateY(-90deg) translateZ(100px);
    }
    
    &:nth-child(6) {
      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;
}
View Compiled
Run Pen

External CSS

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

External JavaScript

This Pen doesn't use any external JavaScript resources.