Usar CSS para reflejar texto

¿Es factible manipular texto usando CSS para que aparezca reflejado o volteado? Por ejemplo, es posible que deseemos mostrar el carácter de tijeras "✂" mirando hacia la izquierda en lugar de hacia la derecha.

Transformaciones CSS al rescate

Las transformaciones CSS permiten lograr este efecto. Para voltear el texto horizontalmente, escale el elemento negativamente en el eje x:

``
-moz-transform: scale(-1, 1);
-webkit-transform: scale(- 1, 1);
-o-transform: escala(-1, 1);
-ms-transform: escala(-1, 1);
transformar: escala(-1, 1);
``

Para voltear el texto verticalmente, escale el elemento negativamente en el eje y:

``
-moz-transform: scale(1, -1);
-webkit-transform: escala(1, -1);
-o-transform: escala(1, -1);
-ms-transform: escala(1, -1);
transformar: escala(1, -1);
``

Demostración

A continuación se explica cómo utilizar estas transformaciones en la práctica:

span{ display: inline-block; margin:1em; } 
.flip_H{ transform: scale(-1, 1); color:red; }
.flip_V{ transform: scale(1, -1); color:green; }

Demo text ✂
Demo text ✂

Al agregar las clases respectivas .flip_H o .flip_V a los elementos, puedes voltear fácilmente el texto horizontal o verticalmente.