Reflejo horizontal y vertical con CSS3

12/dic/2012 5

Me entretengo mucho inventando proyectos donde pueda aplicar CSS3 a destajo sin importarme un carajo las limitaciones de los browsers. Buscando una solución elegante para aplicar el mismo efecto reflejo que tan fácil es hacer en Photoshop, pero con CSS3, lo que quería realizar era el reflejo de un elemento HTML; no un transform: rotate(180deg); sino un reflejo espejo del mismo.

Flip horizontal:

-moz-transform: scaleX(-1);
-o-transform: scaleX(-1);
-webkit-transform: scaleX(-1);
transform: scaleX(-1);
-ms-filter: "FlipH";
filter: FlipH;

Flip vertical:

-moz-transform: scaleY(-1);
-o-transform: scaleY(-1);
-webkit-transform: scaleY(-1);
transform: scaleY(-1);
-ms-filter: "FlipV";
filter: FlipV;

Comentarios

  1. @opeto82 [#]

    Lo malo (por lo meno lo que he entendido) es que tendremos que cargar 2 imagen en vez una hecha con Ps, no es peor?

  2. Jorge Epuñan [#]

    @opeto82: usas la misma imagen pero el efecto de espejo lo logras mediante CSS, no hay extra-imagenes eso es lo bueno.

  3. Ángel [#]

    Buenas, muy interesante creo que se le puede sacar mucho partido, habrá que expandir la mente y contemplar que css ha dejado de ser tan restrictivo.
    Un saludo

    Pd: En el flip vertical para mozilla, ¿cambian en ese navegador la x por la y?

  4. Jorge Epuñan [#]

    mi error lo de -moz, corregido.

  5. Lydia [#]

    Bueno… Tengo entendido que sólo lo leen los navegadores que soportan webkit. Ahora mismo estoy navegando con Mozilla Firefox y no veo ninguno de los efectos que has puesto.
    En Chrome sí, vamos.

Deja tu Comentario

Tu dirección de correo electrónico no será publicada. Los campos necesarios están marcados *

CSSLab