[Tutorial] Efeito giratório no avatar

Autor: Desconhecido
Funcionalidade: Em todas as versões
Descrição: Faça seu avatar dar várias voltas, é isso o que o tutorial propõe, uma modificação simples que faz com que o seu avatar comece a rodar simplesmente passando o seu mouse por cima.

1º - Teremos de aceder à "Folha de estilo CSS"
Para que possamos personalizar o fundo da baliza código, é necessário adicionar códigos CSS para criarmos o efeito desejado, sendo assim, teremos de aceder à:
Painel de Controle -> Visualização -> Imagens e cores -> Cores -> Folha de estilo CSS



2º - Códigos das respectivas versões
Aqui se encontram os códigos para cada versão de fórum disponível no Forumeiros:

• PHPBB2:
  

  Código:

  
span.postdetails.poster-profile a img:hover{-webkit-transform: rotate(1800deg) scale(1);-moz-transform: rotate(1800deg) scale(1);-o-transform: rotate(1800deg) scale(1);}span.postdetails.poster-profile a img{-webkit-transition: all 5s ease-in-out;-moz-transition: all 5s ease-in-out;-o-transition: all 5s ease-in-out;}

  
  
• PHPBB3:
  

  Código:

  
.postprofile dt img:hover{-webkit-transform: rotate(1800deg) scale(1);-moz-transform: rotate(1800deg) scale(1);-o-transform: rotate(1800deg) scale(1);}.postprofile dt img{-webkit-transition: all 5s ease-in-out;-moz-transition: all 5s ease-in-out;-o-transition: all 5s ease-in-out;}

  
  
• PUNBB:
  

  Código:

  
div.user-basic-info a img:hover{-webkit-transform: rotate(1800deg) scale(1);-moz-transform: rotate(1800deg) scale(1);-o-transform: rotate(1800deg) scale(1);}div.user-basic-info a img{-webkit-transition: all 5s ease-in-out;-moz-transition: all 5s ease-in-out;-o-transition: all 5s ease-in-out;}

  
  
• INVISION:
  

  Código:

  
.postprofile dt img:hover{-webkit-transform: rotate(1800deg) scale(1);-moz-transform: rotate(1800deg) scale(1);-o-transform: rotate(1800deg) scale(1);}.postprofile dt img{-webkit-transition: all 5s ease-in-out;-moz-transition: all 5s ease-in-out;-o-transition: all 5s ease-in-out;}

  
  

3º - Resultado Final: