Tutorial : Image Hover ( 360 Degree + Morph Effect )

Assalamualaikumm...

hyeppp korangggg...

syaz lagi kann.. hihihi.. takpaa.. asal syaz dapat kongsi tuto syaz at korang jaaa...

hope dapat bantu korang yang memerlukan tu...

tertanya-tanya macam mana image hover 360 degree plus morph effect?? oke3...

tengok gambar at bawahhh... kalau nak tau lebih lanjut..

try laaa tuto syaz ni yaa.. hihii.. 

SEBELUM

SELEPAS DISENTUH CURSOR

1. Log In --> Dashboard --> Template --> Edit Html..

2. Tekan F3, then search kod yang ni :

img {

dah jumpaa??

3. Copy kod yang dekat bawah ni pulak :

 -webkit-transition: all 0.5s ease;

     -moz-transition: all 0.5s ease;

       -o-transition: all 0.5s ease;

      -ms-transition: all 0.5s ease;

          transition: all 0.5s ease;

}

 

img:hover {

  border-radius: 50%;

  -webkit-transform: rotate(360deg);

     -moz-transform: rotate(360deg);

       -o-transform: rotate(360deg);

      -ms-transform: rotate(360deg);

          transform: rotate(360deg);

}

4. Dah copy?? oke.. korang PASTE kat bawah kod yang korang search tadi..

5. PREVIEW dulu.. kalau dah puas hati n suka..  boleh SAVE laaa..

Kalau dah berjaya tu.. tolong syaz KLIK SINI ... hihi.. THANKSSS :) 

SELAMAT MENCUBA ^^