Como Invertir las imágenes con CSS

Como Invertir las imágenes con CSS

Español | Online | Publicación: 2013 | Free

Descripción:
Girar las imagenes con css es sencillo aca te dejo el como hacerlo, anteriormente vismos como Rotar una imagen con CSS  pues esto será algo parecido asi que depende de uds el uso que el den.


Creamos una clase a la que llamamos DN y vamos a invertilra horizontalmente cuando colocamos el cursor encima:

.DN { /* cualquier propiedad */ }
.DN:hover {
-moz-transform: scaleX(-1); /* Firefox */
-o-transform: scaleX(-1); /* Opera */
-webkit-transform: scaleX(-1); /* Chrome y Safari */
transform: scaleX(-1); /* w3org */
filter: DN; /* Internet Explorer */
}

Le aplicamos a una imagen es sencillo:

<img class="DN" src="URL_imagen" />

También podemos hacerlo con el contenido de cualquier otra etiqueta de bloque como un DIV:

<div class="DN">
 Detodoprogramacion </div>

Detodoprogramacion

Y podemos hacer girar de manera vertical

.DN2 { /* cualquier propiedad */ }
.DN2:hover {
-moz-transform: scaleY(-1); /* Firefox */
-o-transform: scaleY(-1); /* Opera */
-webkit-transform: scaleY(-1); /* Chrome y Safari */
transform: scaleY(-1); /* w3org */
filter: DN2; /* Internet Explorer */
}

Y bueno basicamente eso es todo, saludos