_ap_ufes{"success":true,"siteUrl":"lifeblogid.com","urls":{"Home":"https://lifeblogid.com","Category":"https://lifeblogid.com/category/pengetahuan/agama/","Archive":"https://lifeblogid.com/2017/06/","Post":"https://lifeblogid.com/2017/06/05/bayi-jarang-bab-dan-sering-kentut-bahaya-tidak/","Page":"https://lifeblogid.com/kuppee-japanese-quality-international-specifications/","Attachment":"https://lifeblogid.com/2017/06/05/bayi-jarang-bab-dan-sering-kentut-bahaya-tidak/bayi-jarang-bab-sering-kentut/","Nav_menu_item":"https://lifeblogid.com/2016/04/25/199450/","Mts_ad":"https://lifeblogid.com/?mts_ad=199934","Feedback":"https://lifeblogid.com/?post_type=feedback&p=199979"}}_ap_ufee

Cara Membuat Gambar Berputar dengan CSS



Pernahkah anda melihat gambar yang bisa berputar ketika mouse diarahkan ke gambar tersebut? Nah disini saya akan memberikan tips untuk membuatnya di blog/website anda.

Membuat Gambar Berputar dengan CSS

Membuat Gambar Berputar dengan CSS

Cara Membuat Gambar Berputar

Pertama tambahkan parameter id=”” atau class=”” anda pada kode <img> anda, sebagai contoh disini saya beri nama gambarmuter :

<img id="gambarmuter" src="url gambar anda" />

lalu buat kode css-nya seperti berikut:

img#gambarmuter {
-moz-transition:all .8s ease-in-out;
-ms-transition:all .8s ease-in-out;
-o-transition:all .8s ease-in-out;
-webkit-transition:all .8s ease-in-out;
transition:all .8s ease-in-out
}

img#gambarmuter:hover {
-moz-transform:rotate(360deg);
-ms-transform:rotate(360deg);
-o-transform:rotate(360deg);
-webkit-transform:rotate(360deg);
transform:rotate(360deg)
}

Setelah itu simpan script tersebut, maka gambar anda akan terlihat lebih menarik karena bisa berputer ketika kursor diarahkan ke gambar tersebut.



Tulis Komentar