html, body {
  height: 100%;
  width: 100%;
}

.side {
  background: #f2f2f2;
}

.vert {
  position: absolute;
  width: 50%;
  height: 100%;
}

.vert.side1 {
  left: 0;
/*   background: aqua; */
}
.vert.side2 {
  left: 50%;
/*   background: blue; */
}

.hor {
  position: absolute;
  width: 100%;
  height: 50%;
}

.hor.side1 {
  top: 0;
/*   background: fuchsia; */
}
.hor.side2 {
  top: 50%;
/*   background: #23ff00; */
}

@keyframes fold-horizontal {
    0% {
      transform: perspective(1500px) rotateX(0deg);
      background: #f2f2f2;
      z-index: 100;
      opacity: 1;
    }
    50% {
      background: #b9b9b9;
    }
    99% {
      transform: perspective(1500px) rotateX(180deg);
      background: #f2f2f2;
      z-index: 100;
      opacity: 1;
    }
    100% {
      transform: perspective(1500px) rotateX(180deg);
      background: #f2f2f2;
      opacity: 0;
      z-index: 0;
    }
}

.hor.side1.folding {
  animation: fold-horizontal 1s forwards;
  transform-origin: bottom;
  pointer-events: none;
}
.hor.side2.folding {
  animation: fold-horizontal 1s forwards;
  transform-origin: top;
  pointer-events: none;
}

@keyframes fold-vertical {
    0% {
      transform: perspective(1500px) rotateY(0deg);
      background: #f2f2f2;
      z-index: 100;
      opacity: 1;
    }
    50% {
      background: #b9b9b9;
    }
    99% {
      transform: perspective(1500px) rotateY(180deg);
      background: #f2f2f2;
      z-index: 100;
      opacity: 1;
    }
    100% {
      transform: perspective(1500px) rotateY(180deg);
      background: #f2f2f2;
      opacity: 0;
      z-index: 0;
    }
}

.vert.side1.folding {
  animation: fold-vertical 1s forwards;
  transform-origin: right;
  pointer-events: none;
}
.vert.side2.folding {
  animation: fold-vertical 1s forwards;
  transform-origin: left;
  pointer-events: none;
}



.side.folded {
  background: none;
}