_ap_ufes{"success":true,"siteUrl":"lifeblogid.com","urls":{"Home":"https://lifeblogid.com","Category":"https://lifeblogid.com/category/pengetahuan/agama/","Archive":"https://lifeblogid.com/2017/08/","Post":"https://lifeblogid.com/2017/08/26/resep-mp-asi-ubi-untuk-bayi-usia-6-bulan/","Page":"https://lifeblogid.com/kuppee-japanese-quality-international-specifications/","Attachment":"https://lifeblogid.com/2017/08/26/tempat-wisata-kuliner-jakarta-populer/restoran-jemahdi-seafood/","Nav_menu_item":"https://lifeblogid.com/2017/08/15/200581/","Mts_ad":"https://lifeblogid.com/?mts_ad=199934","Wp_quiz":"https://lifeblogid.com/wp_quiz/can-you-name-the-leo-dicaprio-movie-by-an-image/","Feedback":"https://lifeblogid.com/?post_type=feedback&p=201108"}}_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.



Leave a Reply