Using CSS to Mirror Text

Is it feasible to manipulate text using CSS to make it appear mirrored or flipped? For instance, we may want to display the scissors character "✂" facing left rather than right.

CSS Transforms to the Rescue

CSS transformations make it possible to achieve this effect. To flip text horizontally, scale the element negatively on the x-axis:

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

To flip text vertically, scale the element negatively on the y-axis:

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

Demonstration

Here's how to use these transformations in practice:

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 ✂

By adding the respective classes .flip_H or .flip_V to elements, you can easily flip text horizontally or vertically.