How Can I Use CSS to Create Mirrored or Flipped Text?

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:

<code class="css">span{ display: inline-block; margin:1em; } 
.flip_H{ transform: scale(-1, 1); color:red; }
.flip_V{ transform: scale(1, -1); color:green; }</code>

<code class="html"><span class='flip_H'>Demo text &#9986;</span>
<span class='flip_V'>Demo text &#9986;</span></code>

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

The above is the detailed content of How Can I Use CSS to Create Mirrored or Flipped Text?. For more information, please follow other related articles on the PHP Chinese website!