Navigare rapidă

Ultimele subiecte
» Ying-Yang Tutorial
Scris de Lucifer Mar 24 Apr - 11:34
» Avatar forumotion toolbar
Scris de Lucifer Mar 24 Apr - 11:33
» Salutare
Scris de Lucifer Mar 24 Apr - 11:32
» Avatar User in Online List
Scris de Emanueltutorials Vin 9 Feb - 21:18
Cuvinte-cheie

edit  

Rotirea avatarului la pozitionarea cursorului pe acesta


In acest tutorial am sa va prezint cum puteti face ca avatarul sa se roteasca la 360 de grade pentru toate versiunile. Este un tutorial simplu, dar care are un aspect frumos daca este aplicat de forumul tau.

Pentru forumurile forumgratuit:
Spoiler:
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.user-basic-info img{
    -webkit-transition: all 1.0s ease-out;
    -moz-transition: all 1.0s ease;
    -o-transition: all 1.0s ease;
}
 
div.user-basic-info 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);
}


Pentru forumurile care utilizeaza platforma PhpBB:

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


Tutorial scris de Mitza

Copyright Extrem-Tutorials.com - Nici o parte a acestui tutorial nu poate fi reprodusa fara acordul autorului.

Comentariile utilizatorilor

Fii primul care comenteaza acest articol