Membuat Gambar Header Berputar - Smart Education

Membuat Gambar Header Berputar - Membuat Gambar Header Berputar
Halo Sobat, Kali Ini Saya Mau Posting Tentang Membuat Gambar Header Berputar
Mungkin Sobat Sudah Pernah Melihat Blog Yang Seperti Itu, Dan Kali Ini Saya Akan Membahas Tentang Cara Membuat Gambar Header Berputar.

CSS Ini Akan Bekerja Jika Sobat Menggunakan Header Gambar, Jika Sobat Masih Memakai Header Text Maka Sobat Rubah Dulu Jika Mau Membuat Gambar Header Berputar

Baiklah Tutorialnya :

• Login Blogger
• Klik Template
• Edit HTML
• Centang Expand Template Widget
• Cari Kode   ]]></b:skin>
• Copy Kode Dibawah Lalau Paste Diatas Kode   ]]></b:skin>

#header a img:hover {

 -moz-transform: scale(1) rotate(-180deg) translateX(0px) translateY(0px) skewX(0deg) skewY(0deg);

 -webkit-transform: scale(1) rotate(-180deg) translateX(0px) translateY(0px) skewX(0deg) skewY(0deg);

 -o-transform: scale(1) rotate(-180deg) translateX(0px) translateY(0px) skewX(0deg) skewY(0deg);

 -ms-transform: scale(1) rotate(-180deg) translateX(0px) translateY(0px) skewX(0deg) skewY(0deg);

 transform: scale(1) rotate(-180deg) translateX(0px) translateY(0px) skewX(0deg) skewY(0deg);

 -webkit-transition: all 600ms ease-in-out;

 -moz-transition: all 600ms ease-in-out;

 -ms-transition: all 600ms ease-in-out;-o-transition: all 600ms ease-in-out;

 transition: all 600ms ease-in-out;

}

• Klik Simpan Template

Keterangan :

• Kode Yang Berwarna Merah Adalah Besar Rotasi, Sobat Bisa Mengeditnya  Sendiri
• Kode - (Minus) Menunjukkan Rotasi Berlawanan Terhadap Arah Jarum Jam, Sobat Bisa Menghilangkan Kode Itu (Minus) Kalau Mau Gambarnya Berputar Searah Jarum Jam , Contoh (180deg)

Semoga Bermanfaat.

Sumber : http://art-preview.blogspot.com/2012/10/membuat-gambar-header-berputar.html

Tweet

Unknown pada 5/08/2013