Found the perfect Unicode symbol — but it’s stubbornly facing the wrong way? Trying to mirror an arrow, emoji or any character — and Unicode has nothing on offer? The answer is not in the code points; it‘s all in the CSS. Find out here how to mirror Unicode symbols using CSS step by step, complete with examples and a handy playground to flip any character as you please.
First, Quickly Folding a Thousand Parachutes
If you see a dandelion close its ball of parachuting seeds, you know what’s in the air: moisture.
Dandelions like to spread their seeds far and wide, sending them off to ride on gusts of wind. Getting the seeds and parachutes wet and heavy won’t help them travel.
When air moisture increases and rain is likely, special cells at the base of the seed plume swell, causing the dandelion flowers’ parachutes to close.
In this way, a dandelion is acting as a mirror to its environment, responding to humidity by folding in its seedy plumes.
With that in mind, picture a browser acting as a mirror to all Unicode characters and emoji — flipping and reversing them like playful reflections, say 🌦️?
How to Mirror Unicode Symbols Using CSS
Time needed: 5 minutes
To flip a Unicode symbol or emoji vertically using HTML and CSS:
- Surround the character with
<span>to apply inline CSS to it alone. - Apply the
transform: scaleX(-1);property to the span.Here’s why: Scaling along the x axis with a value of
-1(equivalent to-100%) effectively maps every points to the corresponding point mirrored using a y axis that goes through the center of the element.
Resizing and flipping horizontally: You can also flip characters horizontally, of course, and resize them at the same time; see below. - Make the span display as an inline block using
display: inline-block;.Here’s why: The transform() CSS function works only to blocks, not inline elements such as regular characters; using
inline-blockturns the character into a block, so transform can apply to them while they still display inline with surrounding text.
Mirrored Unicode Example
<span style="display: inline-block; transform: scaleX(-1);">?</span>will display as ?.
How to Mirror Unicode Symbols Using CSS: Playground
|
Worked out right? →
Tips help fuel these email and tech how-tos.
How to Mirror Unicode Symbols Using CSS: FAQ
Can I flip a character across the horizontal axis as well?
Yes.
To turn a Unicode character on its head:
- Use
transform: scaleY(-1)instead oftransform: scaleX(-1).
To flip both horizontally and vertically, you can use transform: scale(-1,-1).
Example: <span style="display: inline-block; transform: scale(-1, -1);">🤌</span> displays as 🤌.
Can I resize and flip at the same time?
Yes.
Using the scale() function, you can use multiples of -1 to resize in addition to flipping a character.
Example: <span style="display: inline-block; transform: scale(-1.5, 1.5)"> will horizontally flip a character and scale it up to 1.5 times its normal size.
Something else to tweak: How to Suggest Hyphenation in HTML and CSS
(Tested in desktop and mobile browsers; first published June 2025, last updated November 2025)