How to use CSS to mirror or flip text?

Sometimes, we want to use CSS to mirror or flip text.

In this article, we’ll look at how to use CSS to mirror or flip text.

How to use CSS to mirror or flip text?

To use CSS to mirror or flip text, we use scale.

For instance, we write

<span class="flip_h">Demo text &#9986;</span>
<span class="flip_v">Demo text &#9986;</span>

to add 2 spans.

Then we write

.flip_h {
  transform: scale(-1, 1);
  color: red;
}

.flip_v {
  transform: scale(1, -1);
  color: green;
}

to set the transform property to scale(-1, 1) to flip horizontally.

And set the transform property to scale(1, -1) to flip vertically.

Conclusion

To use CSS to mirror or flip text, we use scale.