Salutare prieteni,

In tutorialul de astazi am sa va arat cum puteti personaliza avatarele in asa fel incat, in momentul cand plasati cursorul pe acestea sa se roteasca 360 grade.

Pentru inceput intrati in:
P.A. ~> Afisare ~> Imagini si culori ~> Culori ~> Foaie de stil CSS ~> iar de aici depinde de versiunea forumului dumneavoastra.

Phpbb2 :

Cod:

      .poster-profile img{
            -webkit-transition: all 1.0s ease-out;
            -moz-transition: all 1.0s ease;
            -o-transition: all 1.0s ease;
        }
         
      .poster-profile img:hover {
            -webkit-transform: rotate(360deg);
            -moz-transform: rotate(360deg);
            -o-transform: rotate(360deg);
        }

Phpbb3 :

Cod:

       div.postprofile dl dt img{
            -webkit-transition: all 1.0s ease-out;
            -moz-transition: all 1.0s ease;
            -o-transition: all 1.0s ease;
        }
         
      div.postprofile dl dt img:hover {
            -webkit-transform: rotate(360deg);
            -moz-transform: rotate(360deg);
            -o-transform: rotate(360deg);
        }

PunBB :

Cod:

       div.postprofile dl dt img{
            -webkit-transition: all 1.0s ease-out;
            -moz-transition: all 1.0s ease;
            -o-transition: all 1.0s ease;
        }
         
      div.postprofile dl dt img:hover {
            -webkit-transform: rotate(360deg);
            -moz-transform: rotate(360deg);
            -o-transform: rotate(360deg);
        }

Invision :

Cod:

       dl.postdetails dt img{
            -webkit-transition: all 1.0s ease-out;
            -moz-transition: all 1.0s ease;
            -o-transition: all 1.0s ease;
        }
         
      dl.postdetails dt img:hover {
            -webkit-transform: rotate(360deg);
            -moz-transform: rotate(360deg);
            -o-transform: rotate(360deg);
        }

Iar dupa ce ati introdus unul din codurile prezentate mai sus, nu uitati sa salvati ! Rotirea avatarului la plasarea cursorului peste el 827527

Tutorial scris de [Trebuie sa fiti inscris si conectat pentru a vedea acest link] pentru Extrem-tutorials.com .
Nici o parte a acestui tutorial nu poate fi reprodusa fara acordul autorului.