*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
:root{
  --clr: #222;
  --bc1: #dcdcdc;
  --bc2: #c8c8c8;
  --bc3: #f2f2f2;
  --ca1: #ef4149;
  --ca2: #f75d64;
  --ca3: #f14e55;
}

.box{
  margin: 0;
  padding: 0;
  z-index: -50;
  display:grid;
  place-content:center;
  min-height:100vh;
  min-width:100%;
  background:var(--clr);
  overflow:hidden;
  position:fixed;
}
.container{
  position:relative;
  transform:skewY(-20deg);
}
.containerA{
  position:relative;
  transform:skewY(-20deg);
  top:-130px;
  right:-300px;
}
.containerB{
  position:relative;
  transform:skewY(-20deg);
  top:130px;
  right:300px;
}
.container .cube,
.containerA .cube,
.containerB .cube{
  position:relative;
  translate:calc(var(--z) * 22px) calc(var(--z) * 22px);
}
.container .cube div,
.containerA .cube div,
.containerB .cube div{
  position:absolute;
  translate:calc(-25px * var(--x)) calc(-25px * var(--y));
}
.container .cube div span,
.containerA .cube div span,
.containerB .cube div span{
  position:relative;
  display:inline-block;
  width:20px;
  height:20px;
  background:var(--bc1);
  transition:1.5s;
}
.container .cube div span.active,
.containerA .cube div span.active,
.containerB .cube div span.active{
  background:var(--ca1);
  transform:translateY(-20px);
  animation:animate 2s ease-in-out infinite;
}
.container .cube div span:before,
.containerA .cube div span:before,
.containerB .cube div span:before{
  content:"";
  position:absolute;
  left:-15px;
  width:15px;
  height:100%;
  background:var(--bc2);
  transform-origin:right;
  transform:skewY(45deg);
  transition:1.5s;
}
.container .cube div span.active:before,
.containerA .cube div span.active:before,
.containerB .cube div span.active:before{
  background:var(--ca2)
}
.container .cube div span:after,
.containerA .cube div span:after,
.containerB .cube div span:after{
  content:"";
  position:absolute;
  top:-15px;
  left:0;
  width:100%;
  height:15px;
  background:var(--bc3);
  transform-origin:bottom;
  transform:skew(45deg);
  transition:1.5s;
  box-shadow:-100px 100px 5px #00000026
}
.container .cube div span.active:after,
.containerA .cube div span.active:after,
.containerB .cube div span.active:after{
  background:var(--ca3)
}
@keyframes animate{
  0%{
    filter:hue-rotate(0deg)
  }
  to{
    filter:hue-rotate(360deg)
  }
}