Cara Membuat Gambar Berputar

Kali ini saya akan berikan contoh tentang bagaimana membuat gambar memutar menggunakan CSS transitions. cara ini saya dapat dari Mas Noer Cholis dan ternyata Cara kerjanya sangat sederhana sekali, yaitu ketika pointer mouse diletakkan diatas gambar maka secara otomatis gambar akan memutar dan membesar.

Silahkan anda lihat contoh gambar dibawah ini. Anda bisa coba meletakkan pointer mouse diatas gambar, maka gambar tersebut langsung memutar dan membesar.


Anda bisa ikuti langkah - langkahnya dibawah ini :
1. Login ke blogger dengan ID anda.
2. Klik Rancangan.
3. Dan KLik tab Edit HTML.
4. Cari kode ini </head>
5. Copy kode di bawah ini dan taruh sebelum kode </head>

<style type="text/css"> #Gambar_memutar div { height:100px; width:100px; border: 3px solid #D8D8D8; border-style:double; margin:10px auto; text-align:center; -webkit-transition: all 2s ease-in-out; -moz-transition: all 2s ease-in-out; -o-transition: all 2s ease-in-out; -ms-transition: all 2s ease-in-out; transition: all 2s ease-in-out; padding-top:5; padding-left:5; padding-bottom:5; padding-right:5; } #Gambar_memutar div:hover, #Gambar_memutar div.hover_effect { -webkit-transform:rotate(720deg) scale(2,2); -moz-transform:rotate(720deg) scale(2,2); -o-transform:rotate(720deg) scale(2,2); -ms-transform:rotate(720deg) scale(2,2); transform:rotate(720deg) scale(2,2); } </style>

6. Simpan Template.
7. Langkah selanjutnya, anda tinggal copy kode dibawah ini dan anda bisa taruh kode gambar ini pada gadget atau akan dipasang pada artikel post anda untuk menampilkan gambar dengan efek memutar dan membesar, silahkan ... itu terserah anda.

<div id="Gambar_memutar"> <div class="hover"><a href="http://www.blogmasterwebsite.blogspot.com.com" target="_blank"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgybxbZ9R_n2qh1Lm7lwxRwimLErMRuLhOWdIAJv6dpA41OLM-QfOKWkHT8Fbui93qYZM6BFN3-RJvL_V1_fLL35wUhGCDibZPsquNn6V20hNSoh_w138Ul5HD8QqAAyXthk4vg4sFdQg8m/s1600/Logo+cara+buat+web+gratis.jpg" width="100" height="100"/></a> </div> </div>

Catatan :
- Ganti ULR blog dan ULR image dengan ULR milik anda.

Mudah kan...? Silahkan di coba dan diotak atik sendiri sesuka selera anda.
Semoga bermanfaat.... 
Jangan lupa luangkan waktu untuk beri komentar ya......terima kasih.