JSFiddle - React, Tailwind, and code Playground

HTML

<div class="box">Scale</div>
<div class="box2">TranslateZ</div>

CSS

body {
  padding: 130px;
}

.box {
  width: 100px;
  height: 100px;
  background: coral;
  transform: perspective(1000px);
  transition: 1s ease-in;
  margin-bottom: 20px;
}

.box2 {
  width: 100px;
  height: 100px;
  background: coral;
  transform: perspective(500px);
  transition: 1s linear;
}

.box:hover {
  transform: scale(3);
}

.box2:hover {
  transform: perspective(1000px) translateZ(600px);
}