<div id="skew">
  <img src="https://i.imgur.com/6xM7wdY.png" />
</div>

<h3>Hiệu ứng có kèm transition</h3>

<div id="transition">
  <img src="https://i.imgur.com/6xM7wdY.png" />
</div>
#skew:hover img {
  transform: skewY(45deg);
  -moz-transform: skewY(45deg);
  -webkit-transform: skewY(45deg);
}

#transition img {
  transition: 1s ease-in-out;
}
#transition:hover img {
  transform: skew(-45deg);
  -moz-transform: skew(-45deg);
  -webkit-transform: skew(-45deg);
  transform-origin: 0% 55%;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.