Flipping/Inverting/Mirroring text using css only

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]>
<style>
    .mirror {
        filter: progid:DXImageTransform.Microsoft.BasicImage(mirror=1);
    }
</style>
<![endif]-->

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

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

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.

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