Flipping/Inverting/Mirroring text using css only


Html Problem Overview

I did some googling and here's my answer

.mirror {
  display: block;
  -moz-transform: matrix(-1, 0, 0, 1, 0, 0);
  -webkit-transform: matrix(-1, 0, 0, 1, 0, 0);
  -o-transform: matrix(-1, 0, 0, 1, 0, 0);

<!--[if IE]>
    .mirror {
        filter: progid:DXImageTransform.Microsoft.BasicImage(mirror=1);

<div class="mirror">testing</div>

The only problem here is that the center of mirroring is not the center of the object, so maybe we need some javascript to move the object where we want it.

Html Solutions

Solution 1 - Html

Your code is correct but there is an easier way to do this:

img.flip {
  -moz-transform:    scaleX(-1); /* Gecko */
  -o-transform:      scaleX(-1); /* Opera */
  -webkit-transform: scaleX(-1); /* Webkit */
  transform:         scaleX(-1); /* Standard */

  filter: FlipH;                 /* IE 6/7/8 */

I think this solves your centered mirroring issue.

As noted you will have to set the element to use a display of block, inline-block etc.

Solution 2 - Html

to mirror use transform: scaleX(-1); to flip use rotate(180deg);


All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
QuestionTiansHUoView Question on Stackoverflow
Solution 1 - HtmlhitautodestructView Answer on Stackoverflow
Solution 2 - HtmlYehuda SchwartzView Answer on Stackoverflow