<p>マウスホバーかタップしてみて</p>
<div class="container">
  <img class="transform-img" src="https://drive.google.com/uc?export=view&id=13TBj2wMdMKxukp4GAf2eFYHlS_p9T9bI" alt="">
</div>
/* 黒枠 */
.container {
  align-items: center;
  display: flex;
  height: 150px;
  justify-content: center;
  outline: 1px solid #000;
  perspective: 300px;
  width: 300px;
}

/* transform要素 */
.transform-img {
  background-color: #2188b6;
  height: 120px;
  transition: transform 1.5s;
  width: 120px;
}

.container:hover {
  cursor: pointer;
}

.container:hover .transform-img {
  transform: translateZ(100px);
}
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.