Hoy vamos a invertir una imagen, aclaro que invertir no es lo mismo que rotar, al rotar giramos un elemento sobre su eje o punto central un número determinado de grados, por el contrario, al rotar, tomamos el elemento y lo manipulamos de manera que podemos voltear/invertir la imagen, para entenderlo mejor preparemos el ejemplo.

La imagen para la demostración es esta:

Para empezar necesitamos el código de la imagen:

<img id="moto-1" src="moto.jpg" /><!-- Horizontalmente -->
<img id="moto-2" src="moto.jpg" /><!-- Verticalmente -->

"moto-1" y "moto-2" son los nombres identificadores de nuestras imágenes, mediante los cuales aplicaremos los estilos.

A continuación el CSS para invertir la imagen cuando el puntero del mouse pasa por encima:

<style type="text/css">
    #moto-1:hover {
        transform: scaleX(-1);
        -moz-transform: scaleX(-1); /* Firefox */
        -webkit-transform: scaleX(-1); /* Chrome - Safari */
        -o-transform: scaleX(-1); /* Opera */
    }
    #moto-2:hover {
        transform: scaleY(-1);
        -moz-transform: scaleY(-1); /* Firefox */
        -webkit-transform: scaleY(-1); /* Chrome - Safari */
        -o-transform: scaleY(-1); /* Opera */
    }
</style>

transform y sus variantes por navegador, lo usamos para aplicar cambios de forma, tamaño y posición, en este caso utilizamos scaleX y scaleY para realizar el efecto de invertir horizontal y vertical respectivamente.

Con los estilos asignados, nuestro ejemplo está casi listo:

Un efecto muy simple y bonito, pero podemos mejorarlo. En el post ¿Cómo rotar elementos con CSS3? aprendimos a utilizar el estilo transition, con el cual configuramos el tiempo que durará el efecto asignado en transform.

Nuestro CSS final queda así:

<style type="text/css">
    #moto-1 , #moto-2 {
        transition: 1.2s ease;
        -moz-transition: 1.2s ease; /* Firefox */
        -webkit-transition: 1.2s ease; /* Chrome - Safari */
        -o-transition: 1.2s ease; /* Opera */
    }
    #moto-1:hover {
        transform: scaleX(-1);
        -moz-transform: scaleX(-1); /* Firefox */
        -webkit-transform: scaleX(-1); /* Chrome - Safari */
        -o-transform: scaleX(-1); /* Opera */
    }
    #moto-2:hover {
        transform: scaleY(-1);
        -moz-transform: scaleY(-1); /* Firefox */
        -webkit-transform: scaleY(-1); /* Chrome - Safari */
        -o-transform: scaleY(-1); /* Opera */
    }
</style>

#moto-1 , #moto-2, asignamos la duración en segundos y el tipo de efecto.

Y el resultado final es el siguiente:

Pasa el puntero del mouse sobre el centro de las imágenes, y verás como se invierten horizontal y verticamente.