<p>マウスホバーかタップしてみて</p>
<div class="flex-wrapper">
<div class="container">
  skewX
  <img class="transform-img skewx" src="https://drive.google.com/uc?export=view&id=13TBj2wMdMKxukp4GAf2eFYHlS_p9T9bI" alt="">
</div>
<div class="container">
  skewY
  <img class="transform-img skewy" 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;
}

/* skewX:水平方向に拡大・縮小 */
.container:hover .skewx {
  transform: skewX(-30deg);
}
/* skewY:垂直方向に拡大・縮小 */
.container:hover .skewy {
  transform: skewY(30deg);
}
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.