Cara Membuat Efek Rotasi Pada Gambar

Beragam cara kita lakukan supaya blog kita tampil maksimal. Memanjakan mata pengunjung agar mereka betah dengan isi artikel kita. Kali ini saya akan membagikan tips untuk membuat efek rotasi pada gambar. Untuk efek berikut ini anda tidak perlu menambahkan script jquery pada template blog anda, efek berikut ini cukup sederhana yaitu hanya menggunakan CSS. Berikut langkah-langkahnya :

• Masuk ke dashboard blogger
• klik Template
• Carilah kode ]]></b:skin>, untuk memudahkan nya tekan Ctrl + F
• Letakkan kode berikut ini diatas kode ]]></b:skin>

KODE

.post-body img{

border-radius: 2%;

-webkit-transition: all 1s ease;

-moz-transition: all 1s ease;

-o-transition: all 1s ease;

-ms-transition: all 1s ease;

transition: all 1s ease;

}

.post-body img:hover{  transition: all 2s ease-in-out;

-webkit-transform:rotate(45deg);

-moz-transform:rotate(45deg);

-ms-transform:rotate(45deg);

-o-transform:rotate(45deg);

transform:rotate(45deg);

z-index: 999;

box-shadow: 8px -6px 5px rgba(50, 50, 50, 0.75);

}

• Kemudian Save. Dan lihat pada blog anda. Semoga berhasil.