Flipping/Inverting/Mirroring text using css only

TiansHUo picture TiansHUo · Aug 8, 2010 · Viewed 77.8k times · Source

I did some googling and here's my answer

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.

Answer

hitautodestruct picture hitautodestruct · Aug 8, 2010

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.