Beranda » Tips Trik » Tutorial Blog » Membuat Gambar Header Berputar - Smart Education

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

Belum ada tanggapan untuk "Membuat Gambar Header Berputar - Smart Education"

Posting Komentar

Berkomentarlah yang sopan, sesuai dengan topik yang dibahas!