JSFiddle - React, Tailwind, and code Playground

HTML

<div class="field">
    <div class="element-1"></div>
    <div class="element-2"></div>
</div>

CSS

html{
height: 100%;
width: 100%;
}
body{
  height: 100%;
  width: 100%;
  overflow: hidden;
  position: relative;
  -webkit-perspective: 600px;
  -moz-perspective: 600px;
  perspective: 600px;

  -webkit-transform-style: preserve-3d;
  -moz-transform-style: preserve-3d;
  transform-style: preserve-3d;
  }

.element-1{
    display: block;
    position: static;
    width: 100px;
    height: 100px;
    background-color: #f00;
    -webkit-transform: translateX(20px) translateY(20px) translateZ(50px);
    -moz-transform: translateX(20px) translateY(20px) translateZ(50px);
    transform: translateX(20px) translateY(20px) translateZ(50px);
    }

.element-2{
    display: block;
    position: static;
    width: 100px;
    height: 100px;
    background-color: #00f;
    -webkit-transform: translateX(-20px) translateY(-20px) translateZ(0px);
    -moz-transform: translateX(-20px) translateY(-20px) translateZ(0px);
    transform: translateX(-20px) translateY(-20px) translateZ(0px);
    }

.field{
line-height: 0;
  font-size: 0;
  text-align: center;
  width: 0;
  height: 0;
  position: absolute;
  left: 50%;
  top: 50%;
  margin: 0;

  -webkit-perspective: 600px;
  -moz-perspective: 600px;
  perspective: 600px;

  -webkit-transform-origin: 0 0 0;
  -moz-transform-origin: 0 0 0;
  transform-origin: 0 0 0;

  -webkit-transform-style: preserve-3d;
  -moz-transform-style: preserve-3d;
  transform-style: preserve-3d;
}