bom esse tutorial é bem Simples, quando voce adicionar o codigo (que se encontra abaixo) em sua pagina CSS, ao passar ao mouse por cima do avatar ele irá ter um efeito e ficará na diagonal.

                               --->Tutorial , dicas e astúcias <---

         Adicionar efeito ao passar o mouse por cima do avatar

1. Acesse :

Painel de controle > > visualização>>cores >> folha de estilo CSS >> aplique o código de sua versão:

2. Códigos para devidas versões

 PhpBB2:

.poster-profile img{

      margin-left: 3px;

    border: 5px solid #eee;

    -webkit-box-shadow: 4px 4px 4px rgba(0,0,0,0.2);

    -moz-box-shadow: 4px 4px 4px rgba(0,0,0,0.2);

    box-shadow: 4px 4px 4px rgba(0,0,0,0.2);

    -webkit-transition: all 0.5s ease-out;

    -moz-transition: all 0.5s ease;

    -o-transition: all 0.5s ease;

}

 

.poster-profile img:hover {

    -webkit-transform: rotate(-7deg);

    -moz-transform: rotate(-7deg);

    -o-transform: rotate(-7deg);

}

div.postprofile dl dt img{

      margin-left: 3px;

    border: 5px solid #eee;

    -webkit-box-shadow: 4px 4px 4px rgba(0,0,0,0.2);

    -moz-box-shadow: 4px 4px 4px rgba(0,0,0,0.2);

    box-shadow: 4px 4px 4px rgba(0,0,0,0.2);

    -webkit-transition: all 0.5s ease-out;

    -moz-transition: all 0.5s ease;

    -o-transition: all 0.5s ease;

}

 

div.postprofile dl dt img:hover {

    -webkit-transform: rotate(-7deg);

    -moz-transform: rotate(-7deg);

    -o-transform: rotate(-7deg);

}

div.user-basic-info img{

    margin: 3px;

    border: 5px solid #eee;

    -webkit-box-shadow: 4px 4px 4px rgba(0,0,0,0.2);

    -moz-box-shadow: 4px 4px 4px rgba(0,0,0,0.2);

    box-shadow: 4px 4px 4px rgba(0,0,0,0.2);

    -webkit-transition: all 0.5s ease-out;

    -moz-transition: all 0.5s ease;

    -o-transition: all 0.5s ease;

}

 

div.user-basic-info img:hover {

    -webkit-transform: rotate(-7deg);

    -moz-transform: rotate(-7deg);

    -o-transform: rotate(-7deg);

}

dl.postdetails dt img{

      margin-bottom: 10px;

    border: 5px solid #eee;

    -webkit-box-shadow: 4px 4px 4px rgba(0,0,0,0.2);

    -moz-box-shadow: 4px 4px 4px rgba(0,0,0,0.2);

    box-shadow: 4px 4px 4px rgba(0,0,0,0.2);

    -webkit-transition: all 0.5s ease-out;

    -moz-transition: all 0.5s ease;

    -o-transition: all 0.5s ease;

}

 

dl.postdetails dt img:hover {

    -webkit-transform: rotate(-7deg);

    -moz-transform: rotate(-7deg);

    -o-transform: rotate(-7deg);

}

3. Resultado: