CSS Skew

img {
 -webkit-transform: skew(5deg, 25deg);
 -moz-transform: skew(5deg, 25deg);
 -o-transform: skew(5deg, 25deg);
 transform: skew(5deg, 25deg);
}
  

HTML Code

<img src="car.jpg" />
  

Lihat Hasil

Hover image skew

Contoh:

CSS Code

a.skew img {
 -webkit-transition: all 0.5s ease-in-out;
 -moz-transition: all 0.5s ease-in-out;
 -o-transition: all 0.5s ease-in-out;
 transition: all 0.5s ease-in-out;
}
a.skew:hover img {
 -webkit-transform: skew(-5deg, -25deg);
 -moz-transform: skew(-5deg, -25deg);
 -o-transform: skew(-5deg, -25deg);
 transform: skew(-5deg, -25deg);
}
  

HTML Code

<a href="classic-sedan.html" class="skew"><img src="car.jpg" /></a>
  

Hasilnya