WebTaller - Aprender CSS - Filtro para invertir

Filtro de imágenes mediante CSS: Flip

Este es un efecto curioso. Permite mostrar imágenes y texto invertidos horizontal o verticalmente.... ¿Quieres ver Google del revés?

Aplicar este filtro es muy sencillo ya que no posee parámetros. Para aplicarlo a una imagen sólo debemos insertar el siguiente código en nuestra página

<img src="miimagen.gif" style="FILTER: FlipH">

En este caso la imagen aparecería invertida horizontalmente (FlipH) si deseamos que aparezca invertida verticalmente deberemos substituir FlipH por FlipV

¿Como conseguimos girar la imagen horizontal y verticalmente a la vez?.

Para ello hemos creado una tabla en la que cada imagen ocupa una celda y en la celda inferior derecha hemos aplicado el filtro FlipH y a su vez a la imagen contenida en esa celda le aplicamos el filtro FlipV con lo que conseguimos dos inversiones:

<td style="Filter: FlipH"><img src="miimagen-gif" style="FILTER: FlipV"></td>

Este efecto también puede aplicarse a un texto (tanto FlipH como FilpV). Sólo hay que tener en cuenta que en el estilo tambien debemos definir el ancho es decir que esto:

<P style="width: 300px; Filter: FlipH">Este es un texto escrito
como normalmente se escriben los textos y
nuestros teclados lo permiten, pero se visualiza
invertido horizontalmente. Vamos que es un lío
intentar leerlo.</P>