<div class="wrapper">
 <div class="division1">translateZ, perspective 적용 x</div>
 <div class="division2">translateZ 적용</div>
 <div class="perspective">
   <div class="division3">translateZ, perspective 적용</div>
 </div>
</div>
.wrapper {
  display: flex;
  justify-content: space-between;
  height: 100vh;
  align-items: center;
  padding: 30px;
}

.division1 {
  width: 100px;
  height: 100px;
  background-color: red;
}

.division2 {
  width: 100px;
  height: 100px;
  background-color: blue;
  transform: translateZ(200px);
}

.division3 {
  width: 100px;
  height: 100px;
  background-color: skyblue;
  transform: translateZ(200px);
}

.perspective {
  transform-style: preserve-3d;
  perspective: 1500px;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.