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
<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>
<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:
0 comentarios