_ap_ufes{"success":true,"siteUrl":"lifeblogid.com","urls":{"Home":"https://lifeblogid.com","Category":"https://lifeblogid.com/category/pengetahuan/agama/","Archive":"https://lifeblogid.com/2017/03/","Post":"https://lifeblogid.com/2017/03/10/cara-ampuh-untuk-mengatasi-perut-kembung-pada-bayi/","Page":"https://lifeblogid.com/kuppee-japanese-quality-international-specifications/","Attachment":"https://lifeblogid.com/2017/03/10/cara-ampuh-untuk-mengatasi-perut-kembung-pada-bayi/cara-menghilangkan-perut-kembung-pada-bayi/","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=199955"}}_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