Css 3 Membuat Kotak Miring Postingan

CSS 3 memang sangatlah unik dan mengesankan, banyak yang sangat terkesan dengan kehebatan CSS 3. Untuk tutorial kali ini kita akan mencoba membuat kotak miring yang berada didalam postingan ataupun bisa di isi gambar, terserah sama kreatifitas kalian masing-masing.

Jika kalian masih bingung dengan judul diatas anda bisa melihat demonya seperti di bawah ini.

Lihat DEMO

Kurang lebih seperti itu demonya, mungkin anda akan sudah tahu untuk membuatnya.
Berikut ini Script CSS 3, silahkan anda coba pada postingan anda dengan masuk html.

.miring {
   z-index: 1;
   position: relative;
   padding: 3px;
   width: 400px; /*atur lebar kotaknya*/
   height: 400px;/*atur tinggi kotaknya*/
   -moz-box-shadow:0px 0px 10px rgba(0, 0, 0, 0.3);
   -moz-transform: rotate(-15deg);
   -webkit-box-shadow:0px 0px 10px rgba(0, 0, 0, 0.3);
   -webkit-transform: rotate(-15deg);
   -webkit-transition: 0.3s ease-in-out;
   -moz-transition: 0.3s ease-in-out;
}
.miring:hover {
   z-index: 2;
   position: relative;
   -moz-transform: rotate(0deg);
   -moz-transform: scale(1.25);
   -webkit-transform: rotate(0deg);
   -webkit-transform:  scale(1.25);

Silahkan anda coba dan kembangkan untuk memaksimalkan kode CSS 3 diatas. Untuk lebar dan tinggi silahkan anda ganti kode berwarna merah.