<div class="box box_1"></div>
<div class="box box_2"></div>
<div class="box box_3"></div>

body {
  box-sizing: border-box;
  padding: 20px;
  margin: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  min-height: 100vh;
  transform-style: preserve-3d;
  perspective: 1000px;
}

.box {
  width: 250px;
  height: 60px;
  background-color: tomato;
  position: absolute;
}

.box_1 {
  background-color: yellow;
  transform: rotateX(20deg) rotateY(5deg);
}

.box_2 {
  transform: translate3d(0px, 0px, 40px) rotateX(2deg);
  border-radius: 50%;
  width: 150px;
  height: 150px;
  left: calc(50% + 20px);
  top: calc(50% - 150px);
}

.box_3 {
  transform: rotateY(-34deg) rotateX(2deg) rotateZ(-20deg);
  background-color: orange;
  left: calc(50% - 180px);
  top: calc(50% - 100px);
}