Invertir las imágenes con CSS

Invertir las imágenes con CSS

Buenas, ahora con un tutorial de como invertir imágenes, en realidad no tengo ninguna idea al respecto de en que lo pueda utilizar tal vez usted si, relativamente como propósito de jugar con el CSS, hagamos girar las cosas en cualquier navegador.

Creamos una clase a la que llamamos D9p y vamos a invertirla horizontalmente cuando pasamos el cursor por encima

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

Con una imagen es sencillo:

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

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

<div class="D9p"> Opuesto tu name </div>

Opuesto tu Name

De manera similar, podemos hacer girar las cosas verticalmente:

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

1.  Y Listo → 
2. Si tienes duda, comenta todas serán respondidas.

¡Compártelo!

Tweet