volteando texto usando transformaciones CSS

en CSS, puede manipular texto y otros elementos usando transformaciones. Una transformación común es la reflejo, también conocida como volteo. Este efecto se puede lograr usando una propiedad CSS simple.

para voltear el texto horizontalmente (reflejarlo en el eje vertical), use la siguiente propiedad CSS:

-Moz-Transform: escala (-1, 1);
-webkit-transform: scale (-1, 1);
-o-transform: scale (-1, 1);
-ms-transform: scale ( -1, 1);
transformar: escala (-1, 1);

esta propiedad escala el elemento horizontalmente por -1, volteándolo efectivamente a lo largo del eje vertical.

De manera similar, para voltear el texto verticalmente (reflejarlo a través del eje horizontal), use esta propiedad:

-Moz-Transform: Scale (1, -1);
-WebKit-Transformform : escala (1, -1);
-O-Transform: Scale (1, -1);
-MS-Transform: Scale (1, -1);
Transform: Scale (1, -1);

aplicando esta propiedad, escala el elemento verticalmente por -1, volteándolo a lo largo del eje horizontal.

Ejemplo

Considere el siguiente código HTML, que muestra algún texto y un carácter de tijera:

texto de demostración ✂
Texto de demostración ✂

El siguiente código CSS aplica los efectos de volteo horizontal y vertical a los tramos correspondientes:

SPAN {Pantalla: Inline: Inline: Inline: Inline -bloquear; margen: 1em; }
. flip_h {transform: escala (-1, 1); Color: rojo; }
. flip_v {transform: escala (1, -1); Color: verde; }

Esto reflejará los caracteres de las tijeras a lo largo de sus respectivos ejes, creando las tijeras de punta izquierda deseadas.