Rotacion de imagen al pasar el mouse

[iorio]

Hola, tengo este codigo css en mi logo para que gire horizontalmente 360ª al pasar el mouse

Código CSS:

#logo:hover {
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;
-moz-transform: rotateY(-360deg);
-webkit-transform: rotateY(-360deg);
o-transform: rotateY(-360deg);
-ms-transform: rotateY(-360deg);
transform: rotateY(-360deg);
}
 

Cuando se le pasa el mouse la imagen gira horizontalmente pero si quitamos el mouse antes que termine la vuelta la imagen vuelve al punto de origen, a mi me gustaría saber como hacer para que aunque saquemos el mouse la imagen termine de dar la vuelta.

Mi otra duda es como hacer para que cuando la imagen se va dando vuelta en vez de mostrar la misma imagen que se invierte se muestre otra imagen, como una moneda una imagen de cada lado, como se puede hacer esto?

[C2am]

Una respuesta rápida sería: con css deberías probar con keyframe:
http://ksesocss.blogspot.com/2012/03...-css3-una.html

[pzin]

Para la primera duda, simplemente añade la transición al selector normal del elemento en lugar de hacerlo junto a la pseudo-clase :hover:

Código CSS:

#logo {
  transition: all 2.3s ease-in-out;
}
#logo:hover {
  transform: rotateY(-360deg);
}
 

Para lo otro usa animaciones como dice C2am o también una técnica llamada CSS Flip: http://davidwalsh.name/css-flip

[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);
}