<p>マウスホバーかタップしてみて</p>
<div class="flex-wrapper">
<div class="container">
  scaleX
  <img class="transform-img scalex" src="https://drive.google.com/uc?export=view&id=13TBj2wMdMKxukp4GAf2eFYHlS_p9T9bI" alt="">
</div>
<div class="container">
  scaleY
  <img class="transform-img scaley" src="https://drive.google.com/uc?export=view&id=13TBj2wMdMKxukp4GAf2eFYHlS_p9T9bI" alt="">
</div>
</div>
.flex-wrapper {
  display: flex;
  margin-bottom: 10px;
}

/* 黒枠 */
.container {
  align-items: center;
  display: flex;
  flex-direction: column;
  height: 160px;
  justify-content: center;
  outline: 1px solid #000;
  width: 180px;
  margin-right: 10px;
}

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

.container:hover {
  cursor: pointer;
}

/* scaleX:水平方向に拡大・縮小 */
.container:hover .scalex {
  transform: scaleX(1.5);
}
/* scaleY:垂直方向に拡大・縮小 */
.container:hover .scaley {
  transform: scaleY(1.5);
}
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.