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.
transform-origin
to control the point about which the transformation is applied. – ivan_pozdeev Nov 26 '12 at 22:08