Gambar Bergerak Miring Dengan CSS

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

Binatang apa yang gak kelihatan, gak bisa kesentuh, bukan hantu penampakan, tapi suaranya jelas..,?
jawabannya:
Binatang yang usil maenin hape orang hehehe..

Oke to dpoint yah..
Silahkan pointer mouse anda didekatkan pada teks atau gambar di bawah ini. Trus lihat deh hasilnya.

Tulisan Yang Bikin Orang Bisa Gilaaaa..

Gimana? Suka ama efek gerak di atas? Sukaaaaa...!!!
Ssttt.. Jangan keras-keras, entar bangun anunya hihihi...
Nih cara bikinnya:

Kamu Copas kode-kode di bawah ini:
Kode CSS
<style type="text/css">
#miring {transform: rotate(0deg);
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-o-transform: rotate(0deg);
}
#miring:hover { transform: rotate(9deg);
-webkit-transform: rotate(9deg);
-moz-transform: rotate(9deg);
-o-transform: rotate(9deg);
} </style>

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

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

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

Kalo cuma diletakkan di bagian tertentu saja. Misalnya:
>>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

Gitu aja deh.
Silahkan dicoba, lihat hasilnya, lantas tulis komentar kamu di bawah ini. Okeeeeee...

Ditulis Oleh: KanG piE

Info yang kamu baca adalah Gambar Bergerak Miring 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-miring-dengan-css.html" target="_blank">Gambar Bergerak Miring Dengan CSS</a> sebagai asal sumber Info ini.

Sahabat KLIK