Usando CSS para espelhar texto

É viável manipular texto usando CSS para fazê-lo parecer espelhado ou invertido? Por exemplo, podemos querer exibir o caractere de tesoura "✂" voltado para a esquerda em vez de para a direita.

CSS Transforms to the Rescue

As transformações CSS tornam possível alcançar este efeito. Para inverter o texto horizontalmente, dimensione o elemento negativamente no eixo x:

``
-moz-transform: scale(-1, 1);
-webkit-transform: scale(- 1, 1);
-o-transformação: escala(-1, 1);
-ms-transformação: escala(-1, 1);
transformação: escala(-1, 1);
``

Para inverter o texto verticalmente, dimensione o elemento negativamente no eixo y:

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

Demonstração

Veja como usar essas transformações na prática:

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 ✂

Ao adicionar as respectivas classes .flip_H ou .flip_V aos elementos, você pode facilmente virar o texto horizontalmente ou verticalmente.