Membuat tampilan gambar bergerak miring ketika disorot (ahay!!)

sudah jam 11 malam lebih nih,, gilaa... aku ngenet hanya untuk nyari tutorial yang sama seperti diatas dan alhamdulillah akhirnya ketemu juga sama situs ini.Tapi jadinya bingung juga,, itu code mau ditarok dimana??? hauufff......

dan seperti biasa, kode HTML blogq ini aku utek-utek sendiri, and I successfully menampilkan gambar dan blockqiote yang seperti ini, alhamdulillah... ahahaa..

Caranya gampang banget kok. Untuk membuat efek yang hanya muncul ketika disorot mouse, kita bisa pake kode  

:hover{..blablabla..} 

dan untuk membuat efek miringnya, bisa pake kode yang dibuat di situs tutorial tadi:

transform: rotate(7deg);
-webkit-transform: rotate(7deg);
-moz-transform: rotate(7deg);
-o-transform: rotate(7deg);

sehingga kalo disambung jadi gini:

:hover{transform: rotate(-4deg);
-webkit-transform: rotate(-4deg);
-moz-transform: rotate(-4deg);
-o-transform: rotate(-4deg);}

angka 7deg sengaja aku ganti -4deg, angka itu mempengaruhi jumlah derajat efek putaran. tanda (-) digunakan untuk arah putaran berlawanan dengan jarum jam. SEHINGGAA,, Untuk menampilkan efek ini pada blockquote dan image caranya seperti dibawah ini.

1. Masuk blogger > Rancangan > Edit HTML
2. Centang "Expand Template Widget"
3. Cari kode ]]></b:skin>
4. letakkan kode dibawah ini tepat diatas kode ]]></b:skin>

.post blockquote:hover{transform: rotate(-4deg);
-webkit-transform: rotate(-4deg);
-moz-transform: rotate(-4deg);
-o-transform: rotate(-4deg);}

kode diatas untuk merubah tampilan blockquote, dan untuk merubah tampilan image sekaligus, tambahkan juga kode dibawah ini

.post img:hover{transform: rotate(-4deg);
-webkit-transform: rotate(-4deg);
-moz-transform: rotate(-4deg);
-o-transform: rotate(-4deg);}

dan terahir,, jangan lupa disimpan :)


===================================================================
diedit tanggal 6/10/2011: tampilan blog setelah di edit seperti diatas bisa dilihat di blog percobaanku :)