Horizontal and vertical reflex with CSS3

Posted on by in Front End

If you’re looking to do a reflex (or flip) of any HTML element, either image, text or whatsoever, you can use these styles in that same element, instead of having to use Photoshop for it:

Horizontal flip:

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

Vertical flip:

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

Vertical flip example:

flip

Written by

Me gusta la tecnología, sea de que tipo sea y a nivel informático tengo bases de programación, pero lo que más me gusta realmente es la parte de frontend, con que trabajo hace ya más de 6 años. Pero ni siempre me gusta estar encerrado, sobretodo en verano, que salgo con la bicicleta, la moto, voy a bucear, a la playa, etc. Intento viajar siempre que puedo, sea en inverno o en verano.Me gusta la tecnología, sea de que tipo sea y a nível informático tengo bases de programación, pero lo que más me gusta realmente es la parte de frontend, con que trabajo hace ya más de 6 años. Pero ni siempre me gusta estar encerrado, sobretodo en verano, que salgo con la bicicleta, la moto, voy a bucear, a la playa, etc. Intento viajar siempre que puedo, sea en inverno o en verano.

No Comments Yet.

Leave a Comment