Darle la vuelta a una imagen con CSS3

3 comentaron

Seguramente much@s de vosotr@s habreis visto como mover, rotar o animar imagenes a base de codigo CSS3. Pero quizas, tal vez no sepais que con los estilos tambien podemos darles la vuelta, o sea, digamos que las 'giramos del reves' utilizando las propiedades filter: FlipH y transform: scaleX.

Y como se suele decir, mas vale una imagen que 1000 palabras, en este caso tres. 3 Ejemplos en los que podeis ver lo que os he contado. Las imagenes de la izquierda son las originales y las de la derecha las 'volteadas'.







Si quereis utilizar este metodo con alguna imagen, tan solo teneis que copiar y pegar el siguiente codigo, añadiendo la direccion URL de la imagen donde esta indicado en color rojo.

<img class="vuelta" src="URL DE LA IMAGEN">

<style>
.vuelta {
        -moz-transform: scaleX(-1);
        -o-transform: scaleX(-1);
        -webkit-transform: scaleX(-1);
        transform: scaleX(-1);
        filter: FlipH;
        -ms-filter: "FlipH";
}
</style>