Cara Buat Header Hover Swinging

Hai korang,sihat ker?

Hari ni mcm biasa mummy nak kongsi tutorial lagi.

Ok tutorial nye mcm ni bila kita halakan mouse pada header automatik header tue akan jadi senget.Korang tgk gambar kat bawah ni :

Meh sini mummy tunjukkan cara nak buat Header Hover Swinging tue.

Hover swinging okey bukan Hover singing.Korang jgn salah dgr plak..hihihi

Ok Let's go, Mula -mula mcm biasalah Dashboard > Design > Edit Html >

Kemudian tekan F3 @ Ctrl+F cari kod ini :

#Header h1 {

 Dah jumpa kod tue Copy plak kod kat bawah ni:

#header:hover{
-webkit-transition-duration: 2s;
-moz-transform: rotate(-4deg);
-webkit-transform: rotate(-4deg);
}

Kemudian Paste kan kat bawah kod  #Header h1 {

Contoh kod akan jadi seperti nie:

#header h1 {

  margin:5px 5px 0;

  padding:15px 20px .25em;

  line-height:1.2em;

  text-transform:uppercase;

  letter-spacing:.2em;

  font: $pagetitlefont;

}

#header:hover{

-webkit-transition-duration: 2s;

-moz-transform: rotate(-4deg);

-webkit-transform: rotate(-4deg);

}

Warna Merah tue boleh adjust ikut citarasa masing-masing okey!!..

Preview dulu dah selesai baru lah Save..

Selamat Mencuba..Bye!Bye!

KREDIT To : Syafa Lunia