Efect rotatie logo

Vă voi arăta cum puteţi adăuga un efect de rotaţie logo. Acesta funcţionează pe toate versiunile (phpbb3, phpbb2, invision şi punbb).

Instalare:
Intraţi în Panou de Administrare > Afisare > Culori > Foaie de stil. Introduceţi codurile următoare:

PhpBB3 şi Invision

Cod:


#logo {
-webkit-transition: -webkit-transform 1s,opacity 1s,background 1s,width 1s,height 1s;
-o-transition-property: width,height,-o-transform,background,font-size,opacity;
-o-transition-duration: 1s,1s,1s,1s,1s,1s;
-moz-transition-property: width,height,-o-transform,background,font-size,opacity;
-moz-transition-duration: 1s,1s,1s,1s,1s,1s;
transition-property: width,height,transform,background,font-size,opacity;
transition-duration: 1s,1s,1s,1s,1s,1s;
opacity: 0.8;
}
#logo:hover {
-moz-transform: rotate(360deg);
-webkit-transform: rotate(360deg);
-o-transform: rotate(360deg);
transform: rotate(360deg);
opacity: 1.0;
}


PhpBB2

Cod:


#i_logo {
-webkit-transition: -webkit-transform 1s,opacity 1s,background 1s,width 1s,height 1s;
-o-transition-property: width,height,-o-transform,background,font-size,opacity;
-o-transition-duration: 1s,1s,1s,1s,1s,1s;
-moz-transition-property: width,height,-o-transform,background,font-size,opacity;
-moz-transition-duration: 1s,1s,1s,1s,1s,1s;
transition-property: width,height,transform,background,font-size,opacity;
transition-duration: 1s,1s,1s,1s,1s,1s;
opacity: 0.8;
}

#i_logo:hover {
-moz-transform: rotate(360deg);
-webkit-transform: rotate(360deg);
-o-transform: rotate(360deg);
transform: rotate(360deg);
opacity: 1.0;
}

PunBB

Cod:


#pun-logo {
-webkit-transition: -webkit-transform 1s,opacity 1s,background 1s,width 1s,height 1s;
-o-transition-property: width,height,-o-transform,background,font-size,opacity;
-o-transition-duration: 1s,1s,1s,1s,1s,1s;
-moz-transition-property: width,height,-o-transform,background,font-size,opacity;
-moz-transition-duration: 1s,1s,1s,1s,1s,1s;
transition-property: width,height,transform,background,font-size,opacity;
transition-duration: 1s,1s,1s,1s,1s,1s;
opacity: 0.8;
}
#pun-logo:hover {
-moz-transform: rotate(360deg);
-webkit-transform: rotate(360deg);
-o-transform: rotate(360deg);
transform: rotate(360deg);
opacity: 1.0;
}


Am vazut acest efect pe multe forumuri este superb