Gambar Bergerak Putar Dengan CSS

Basa-basi yang gak bakalan basi tebak-tebakan dulu ya.

Binatang apa yang kalo ee kelihatan jelas eenya, Suara broot.. cruuut.. keras banget. Tapi kalo dipegang eenya gak kepegang, diraba-raba gak keraba, apalagi dicium gak kecium baunya?
jawabannya:
Binatang yang lagi ee di dalem TV hehehe..

Oke to dpoint yah..
Silahkan pointer mouse anda didekatkan pada gambar dibawah ini. Dan lihat hasilnya.

Tulisan Yang Bikin Orang Bisa Pusing Tujuh Puteran

Menyukai efek gerak gambar di atas?

Berikut tata cara pembuatannya:

Kode CSS
<style type="text/css">
#putar div {
height: 100px; width: 100px; border: 1px solid #55AAFF; border-style: double; margin: 5px 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; }

#putar div:hover, #putar 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>

Kode HTML
<div id="putar">
<div class="hover"> <a href=" url link gambar.html" target="_blank"> <img src="url link gambar.jpg" width="100" height="150"/> </a>
</div>
</div>

>> Jika efek gerak putar gambar untuk keseluruhan/ template blog. Kode CSS diletak di atas kode ]]></b:skin>.

Urutan membuatnya:
Login dasbor blogger >> design template dan expand >> cari kode ]]></b:skin> dengan menekan CTRL F dan letakkan kode CSS tersebut tepat di atasnya >> SAVE
Trus untuk menampilkan efek putar gambarnya. Tinggal copas Kode HTML >> Letakkan di bagian mana yang kamu mau bisa dipostingan, widget atau footer >> Simpan

>>Postingan

Urutan membuatnya:
Buka new entry >> pakai mode HTML >> Tulis yang mau kamu tulis dan letakkan kode css dan html >> Terbitkan

>> Widget

Urutan membuatnya:
Gadget >> Pilih HTML/Javascript >> Tulis yang mau kamu tulis dan letakkan kode css dan html >> Save

Demikian yang bisa aku kasih tahu.
Silahkan dicoba, lihat hasilnya, lantas tulis komentar kamu di bawah ini. Okeeeeee...

Ditulis Oleh: KanG piE

Info yang kamu baca adalah Gambar Bergerak Putar Dengan CSS dengan harapan bermanfaat untuk kamu. Silahkan kamu copas dan menyebarluaskan seluruh isi artikel ini dengan catatan menyebutkan <a href="http://sahabat-klik.blogspot.com/2012/10/gambar-bergerak-putar-dengan-css.html" target="_blank">Gambar Bergerak Putar Dengan CSS</a> sebagai asal sumber Info ini.

Sahabat KLIK