JSFiddle - React, Tailwind, and code Playground

HTML

<section class="main center">
		<div class="main__front"></div>
		<div class="main__back"></div>
	</section>

CSS

:root{--redpink:#f5888b;--fff:#fff;--white:#F6F6F4;--blue:#8FA2A2;--yellow:#EBBB59;--brown:#8D7445;--black:#303135;--red:#f44336;--green:#7cb353;--pink:#fe33aa}*{padding:0;margin:0;font:italic 22px/1.4'Operator Mono',sans-serif}.center{position: absolute;top:50%;left:50%;transform:translate(-50%,-50%)}

body{background:var(--black);color:var(--yellow)}
.main{
  perspective: 2000px;
}
.main__front, .main__back{
  width: 100px;
  height: 100px;
}
.main__front{
  position: relative;
  background: var(--red);
  animation: moveUp 1s infinite linear alternate;
  z-index: 1;
}
.main__back{
  position: relative;
  background: var(--blue);
  transform: translate3d(-25px,-25px,0px);
  z-index: 10;
}
@keyframes moveUp{
  0%{
    transform: translate3d(25px,25px,-200px);
    z-index: 1;
  }
  50%{
    transform: translate3d(25px,25px,0px);
    z-index: 15;
  }
  100%{
    transform: translate3d(25px,25px,200px);
    z-index: 25;
  }
}