Bienvenida

BIENVENIDO A FAMAG KIRADOBER,

Ultimas Entradas

Darle la vuelta a una imagen

by - domingo, enero 22, 2017

Darle la vuelta a una imagen 



Seguramente muchos de vosotrosy vo sotras 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'.


                                                                     Imagen Original


                                                                     Imagen Girada


Imagen Original


Imagen Girada

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 Azul.
<center><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>

Esto es todo.


Fuente; redeando

Fecha:22/01/2017

Publicado por: 






You May Also Like

0 comentarios

Paginacion