<div class="d-flex">

  <div class="container">

    <h2>flat</h2>

    <div class="box bg-red perspective">

      <div class="box bg-green transform-example"></div>

    </div>

  </div>

  <div class="container">

    <h2>preserve-3d</h2>

    <div class="box bg-red preserve-3d perspective">

      <div class="box bg-green transform-example"></div>

    </div>

  </div>

</div>

html {

  width: 100vw;

  height: 100vh;

  display: flex;

  justify-content: center;

  align-items: center;

  margin: 0;

  font-family: sans-serif;

  text-align: center;

}

​

.container {

  width: 300px;

  height: 300px;

  margin-right: 10px; 

  padding: 0 30px;

  border: 1px solid #000;

}

​

.box {

  width: 200px;

  height: 150px;

}

​

.transform-example {

  transform: translate(50px, 50px) rotateX(45deg);

}

​

.preserve-3d {

  transform-style: preserve-3d;

}

​

.perspective {

  perspective: 300px;

}

​

.d-flex {

  display: flex;

}

​

.bg-red {

  background-color: rgb(244 67 54 / 50%);

}

​

.bg-green {

  background-color: #4caf50;

}