Rotacion de imagen al pasar el mouse

[iorio]

Hola, gracias a ambos,
lo de usar:

Código CSS:

#logo { 
float: left;
-moz-transition: all 2.3s ease-in-out;
-webkit-transition: all 2.3s ease-in-out;
-o-transition: all 2.3s ease-in-out;
-ms-transition: all 2.3s ease-in-out;
transition: all 2.3s ease-in-out;
}
 
#logo:hover {
float: left;
-moz-transform: rotateY(-360deg);
-webkit-transform: rotateY(-360deg);
o-transform: rotateY(-360deg);
-ms-transform: rotateY(-360deg);
transform: rotateY(-360deg);
}
 

Solo hace que en vez de volver al punto de origen de golpe vuelva girando así como vino y no que termine el ciclo como yo quería.



Y lo del css flip esta de maravilla pero no me sale, yo use estos codigos y ni se mueve:

Código HTML:

<div class="flip-container" ontouchstart="this.classList.toggle('hover');">
<div class="flipper">
    <div class="front">
        
<if test="brandingBar:|:ipsRegistry::$applications[ $this->registry->getCurrentApplication() ]['hasCustomHeader']">
{parse template="overwriteHeader" group="{current_app}_global" params=""}
<else />
{parse template="defaultHeader" group="global" params=""}
</if>
 
    </div>
 
    <div class="back">
    <div class="back-logo"></div>
 
<img src="public/images/avatars/default.jpg" />
 
    </div>
</div>
</div>
 

Código CSS:

/* entire container, keeps perspective */
.flip-container {
    perspective: 1000;
}
    /* flip the pane when hovered */
    .flip-container:hover .flipper, .flip-container.hover .flipper {
        transform: rotateY(180deg);
    }
 
.flip-container, .front, .back {
    width: 320px;
    height: 480px;
}
 
/* flip speed goes here */
.flipper {
    transition: 0.6s;
    transform-style: preserve-3d;
 
    position: relative;
}
 
/* hide back of pane during swap */
.front, .back {
    backface-visibility: hidden;
 
    position: absolute;
    top: 0;
    left: 0;
}
 
/* front pane, placed above back */
.front {
    z-index: 2;
}
 
/* back, initially hidden pane */
.back {
    transform: rotateY(180deg);
}