Hola a todos/as hacia tiempo que no me pasaba por aquí, quería comentaros si alguien sabe de algún plugin o tuto donde te explique que hacer para conseguir que el avatar gire o muestre campos ocultos en el perfil del postbit al pasar el ratón por el. Lo he visto por ahí en algún foro y he intentado buscar algún tutorial por aquí pero no he encontrado nada.

Un Saludo

mmm podría hacerse con CSS, primero crear tu clase donde ira el avatar:

Ej.

.postbit_avatar img{
    CÓDIGOS AQUÍ MAS LO DE ABAJO
    -moz-transition: all 0.5s ease-in-out;
    -webkit-transition: all 0.5s ease-in-out;
    transition: all 0.5s ease-in-out;
}

Luego le agregas la 'función hover' (Si es que se llama así..) y pones esto:

.postbit_avatar img:hover {
    -moz-transform: rotate(360deg) scale(1);
    -webkit-transform: rotate(360deg) scale(1);
    transform: rotate(360deg) scale(1);
    opacity: 1;
    filter: alpha(opacity=100);
}

Ya luego lo llamas en algún div:

<div class="postbit_avatar">
    <img src="RUTA DEL AVATAR">
</div>

Lo de hacer aparecer otros campos ocultos al hacer hover.. mm podrías buscar con jQuery, no lo tengo muy claro.

Asi es como lo he puesto, pero no hace nada, :S

.postbit-avatar {
        -moz-border-radius: 5px;
        -webkit-border-radius: 5px;
        border-radius: 5px
        background-color: #DDDDDD;
        border: 1px solid #BEBEBE;
        padding: 4px;
      -moz-transition: all 0.5s ease-in-out;
      -webkit-transition: all 0.5s ease-in-out;
       transition: all 0.5s ease-in-out;
}

.postbit-avatar:hover {
        -webkit-transition: all 250ms ease-in-out;
        -moz-transition: all 250ms ease-in-out;
        -o-transition: all 250ms ease-in-out;
        transition: all 250ms ease-in-out;
        -webkit-box-shadow: 0px 0px 7px 0px rgba(0, 0, 0, 0.3);
        -moz-box-shadow: 0px 0px 7px 0px rgba(0, 0, 0, 0.3);
        box-shadow: 0px 0px 7px 0px rgba(0, 0, 0, 0.3);
       -moz-transform: rotate(360deg) scale(1);
       -webkit-transform: rotate(360deg) scale(1);
       transform: rotate(360deg) scale(1);
       opacity: 1;
      filter: alpha(opacity=100);
}	

Saludos.

Porque le quitaste el img? Si por algo lo puse así.

Da igual, ya lo he conseguido, solo tenia que agregar esto al CSS del hover:

-webkit-transition: 1s;
-webkit-transform: rotate3d(0,0,0, 360deg);

Gracias por el cable.
Saludos

Si lo puse con img, toma solo el tag <img> que este dentro del div postbit-avatar, así evitas que otras cosas también 'giren'.

Pero bueno.. marco y cierro.