Posted by Aak
Aak-share.com Updated at: 3:16:00 AM

Cara Membuat Efek Gambar Berputar di Blogger

1 comment:
Rotasi adalah perputaran benda pada suatu sumbu yang tetap, misalnya perputaran gasing dan perputaran bumi pada poros/sumbunya. Untuk bumi, rotasi ini terjadi pada garis/poros/sumbu utara-selatan (garis tegak dan sedikit miring ke kanan).

Seperti artikel yang akan saya share kali ini, namun bukanlah benda melaikan gambar. Terjadinya efek berputar pada gambar dengan menambahkan kode CSS pada template anda, efek yang ditimbulkan adalah gambar akan berputar dan membesar secara otomatis saat kursor diletakkan diatasnya. Efek berputar hanya timbul dibagian tumbnail postingan, untuk tumbnail yang berada di tempat lain tidak menimbulkan efek berputar.



Perputaran atau rotasi pastinya akan kembali pada tempat semula, sama halnya dengan efek berputar pada gambar yang telah ditambahkan kode CSS. Kembalinya gambar ketempat dan kebentuk semula apabila kursor tidak menyentuhnya. Tujuan membuat gambar berputar adalah untuk memper cantik tampilan pada Blog, dan tidak menyebabkan loading menjadi berat.

Bagi anda yang ingin menambah tampilan blog lebih cantik berikut adalah langkah penerapnnya :
Langakah yang perlu anda lakukan adalah dengan masuk kemenu template dan klik Edit Template, anda copy kode berikut dan pastekan sebelum kode ]]></b:skin>
Berikut ini adalah kode CSS yang akan anda terapkan :

.post img{-o-transition:all 1.5s ease;-moz-transition:all 1.5s ease;-webkit-transition:all 1.5s ease}.post img:hover{-o-transform:scale(1.2) rotate(360deg) translate(0px);-moz-transform:scale(1.2) rotate(360deg) translate(0px);-webkit-transform:scale(1.2) rotate(360deg) translate(0px);-o-transition:all 1.5s ease;-moz-transition:all 1.5s ease;-webkit-transition:all 1.5s ease}}


Penjelasan
Kode yang ditunjukan pada warna merah, mempunya fungsi memutarkan gambar apabila semakin besar nilainya maka perputaran semakin lama.
Kode yang ditunjukan pada warna biru, mempunya fungsi zoom apabila semakin besar nilainya maka semakin besar zoom pada gambar.

Apabila sudah anda terapkan kode CSS diatas selanjutnya anda simpan template dan lihat hasilnya.

Sekian dari saya Cara Membuat Efek Gambar Berputar di Blog  semoga dapat bermanfaat untuk anda, mohon maaf apabila ada kekurangan.

Blogger
Disqus
Pilih Sistem Komentar Yang Anda Sukai

1 comment

This comment has been removed by the author.