body {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  overflow: hidden;
  background: #002b5b;
}

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

.container {
  position: relative;
  display: grid;
  grid-template-rows: repeat(20, 5vh);
  grid-template-columns: repeat(20, 5vw);
  transform-style: preserve-3d;
  cursor: zoom-in;
}

.container:active .monitor {
  transform: scale3d(2, 2, 2);
}

.monitor {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  perspective: 900px;
  transition: 300ms;
}

.trigger {
  position: relative;
}

.camera {
  position: absolute;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  transition: 500ms;
}

.camera.-x {
  transform: rotateX(-30deg);
}

.camera.-y {
  transform: rotateY(0deg);
}

.panel {
  position: absolute;
  top: calc(50% - 25px);
  left: calc(50% - 25px);
  width: 50px;
  height: 50px;
  background: #fff;
  backface-visibility: hidden;
  box-sizing: border-box;
}

.panel:nth-child(1) {
  transform: rotateX(0deg) translateZ(25px);
  background: #2b4865;
}

.panel:nth-child(2) {
  transform: rotateX(180deg) translateZ(25px);
  background: #2b4865;
}

.panel:nth-child(3) {
  transform: rotateX(90deg) translateZ(25px);
  background: #8fe3cf;
}

.panel:nth-child(4) {
  transform: rotateX(-90deg) translateZ(25px);
  background: black;
}

.panel:nth-child(5) {
  transform: rotateY(90deg) translateZ(25px);
  background: #256d85;
}

.panel:nth-child(6) {
  transform: rotateY(-90deg) translateZ(25px);
  background: #256d85;
}

.scale {
  transform: scale3d(0.96, 0.96, 0.96);
}

@keyframes scale {
  0% {
    transform: scale3d(0.96, 0.96, 0.96);
  }

  30% {
    transform: scale3d(0.96, 0.96, 0.96);
  }

  90% {
    transform: scale3d(0.1, 0.1, 0.1);
  }

  100% {
    transform: scale3d(0.1, 0.1, 0.1);
  }
}

h1 {
  position: absolute;
  top: 80px;
  color: white;
  font-family: cursive;
  text-align: center;
  width: 100%;
}