Hola, tengo este codigo css en mi logo para que gire horizontalmente 360ª al pasar el mouse
Código CSS:
Ver original#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?