Can you use CSS to mirror/flip text?

Advanced flipping: Step up your game!

Character-level transformation: Spot the difference!

With inline styles, you can twist a specific character around out of whim. Set the display to inline-block and watch magic unfold:

<span style="transform: scale(-1, 1); display: inline-block; margin-right: 2px;">A</span>BC comes to play


Notice how 'A' turned rogue, eh? The margin-right is to keep spacing in check.

Cross-compatibility: Because we like to play fair!

CSS transformation for older browsers requires you to be a bit tricky. Canvas IE6-8 using the filter properties:

.ie-shuffle {
  filter: progid:DXImageTransform.Microsoft.BasicImage(mirror=1);/* "Who's the fairest of them all?" asked IE6. */
}


Quench the platform-needs with prefixing -webkit-, -moz-, -o-, and -ms- before transform:

.cross-flip {
  -webkit-transform: scaleX(-1); /* Chrome and Safari's secret recipe... */
  -moz-transform: scaleX(-1); /* A treat for Firefox's taste buds... */
  -o-transform: scaleX(-1); /* Opera sent its regards... */
  -ms-transform: scaleX(-1); /* And finally, a little something for IE9... */
  transform: scaleX(-1); /* Can't leave our main out, can we? */
}


The flip encore: Unleashing the beast!

If you're feeling intrepid, play around with rotate(360deg) in combination with scaleX(-1) or take advantage of matrix() for more complex flips, like so:

.flip-360 { transform: rotate(360deg) scaleX(-1); } /* Because 360 no-scopes are still cool! */
.matrix-flip { transform: matrix(-1, 0, 0, 1, 0, 0); } /* Welcome to the Matrix. PS: Watch out for Mr. Smith! */


Dive deeper: When flipping gets real!

Unicode and HTML flipping: Speaking the machine lingo!

Did you know, you can combine unicode HTML encoding with CSS flipping to have dual dominion:

<span style="transform: scaleX(-1); display: inline-block;">&#x202E;</span>


Margins & alignment: The necessary evils!

Post-transformation grooming often involves adjusting margins for visual appeal:

.flippy-spacey {
  transform: scaleX(-1);
  margin-left: 10px; /* Trust me, I'm an artist */
}


Flex and grid gymnastics!

Work within flexbox or grid layouts? Test your flips—transformations may befuddle your layout!

Troubles in flip paradise

Flipped, but interactive!

Remember, a flipped mirror image might bemuse links or buttons. Always check accessibility on transformed elements.

Block vs Inline face-off!

Inline-block or block display types often play nicer with transform:

.friendly-flip {
  display: inline-block;
  transform: scaleX(-1); /* It's a bird... It's a plane... No, it's Super-flip! */
}


UX Alert!

Stay vigilant about readability. Cool flips should still make sense to users.