html - Flipping/Inverting/Mirroring text using css only

Question

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>

Answer 1

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.