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 :)