Flipping/Inverting/Mirroring text using css only
Question
I did some googling and here's my answer
<!--[if IE]>
<style>
.mirror {
filter: progid:DXImageTransform.Microsoft.BasicImage(mirror=1);
}
</style>
<![endif]-->
<style>
.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);
}
</style>
<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.
Solution
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.
OTHER TIPS
to mirror use transform: scaleX(-1);
to flip use transform: scaleX(-1) rotate(180deg);
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow