Flipping/Inverting/Mirroring text using css only

user_262296 0
Viewed 90389

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 center of mirroring is not the center of the object, so maybe we need some javascript to move the object where we want it.

mirroring webkit css html
2 Answers

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

user_54765160
Related