tutorial header hover swinging

Hello pretty and hello handsome Oukay , hari nie saya nak share satu tutorial. Pasal header hover yang boleh berputar macam jam rolex. Aceeee try letak cursor dekat header saya. Dia bergerak kan ? Am i rite ? xD

Oukay , coconut man , moon heads and you ready

Haha , keluar lagu price tag pulak dah. Oukay , let's start our mission , atete :)

Firstly , macam biasa pergi Dashboard > Design > Edit HTML CTRL + F untuk find code yang kat bawah nie.

• Simple template : .Header h1 {
• Washed denim : h1.title {
• Minima : /* Header

Then , korang pilih la korang guna template jenis apa kan. Lastly , korang paste code yang kat bawah nie dekat atas code tadi

#header:hover{

-webkit-transition-duration: 2s;

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

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

}

Tulisan purple tu boleh diubah. Number 2 untuk mengubah masa perjalanan header. Lagi banyak number dia , lagi lama masa berjalan. Hihi , kalau saya buat 10 je. -4 tu kalau korang nak berputar sikit aje. Tapi , kalau nak macam jam Seiko , tukar jadi -360. Segala pertanyaan boleh dibuat diruangan komen saya. Komen sikit boleh ? hihi. Oukay , tutorial ini dikreditkan kepada Syafa Lunia. Dan telah diubah sedikit, sekian wasalam :)