I cobbled together this solution by scouring the Internet including
This solution seems to work in all browsers including IE6+, using scale(-1,1) (a proper mirror) and appropriate filter/-ms-filter properties when necessary (IE6-8):
/* Cross-browser mirroring of content. Note that CSS pre-processors
like Less cough on the media hack.
Microsoft recommends using BasicImage as a more efficent/faster form of
mirroring, instead of FlipH or some kind of Matrix scaling/transform.
@see http://msdn.microsoft.com/en-us/library/ms532972%28v=vs.85%29.aspx
@see http://msdn.microsoft.com/en-us/library/ms532992%28v=vs.85%29.aspx
*/
/* IE8 only via hack: necessary because IE9+ will also interpret -ms-filter,
and mirroring something that's already mirrored results in no net change! */
@media \0screen {
.mirror {
-ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(mirror=1)";
}
}
.mirror {
/* IE6 and 7 via hack */
*filter: progid:DXImageTransform.Microsoft.BasicImage(mirror=1);
/* Standards browsers, including IE9+ */
-moz-transform: scale(-1,1);
-ms-transform: scale(-1,1);
-o-transform: scale(-1,1); /* Op 11.5 only */
-webkit-transform: scale(-1,1);
transform: scale(-1,1);
}
you can use 'transform' to achieve this. http://jsfiddle.net/aRcQ8/
css:
-moz-transform: rotate(-180deg);
-webkit-transform: rotate(-180deg);
transform: rotate(-180deg);
Just one more example how the character could be flipped. Add vendor prefixes if you need ones but for now all modern browsers support unprefixed transform property. The only exception is Opera if Opera Mini mode is enabled (~3% world users).
<!DOCTYPE html>_x000D_
<html>_x000D_
<head>_x000D_
<meta charset="utf-8">_x000D_
<title>Text rotation</title>_x000D_
<style type="text/css" media="screen">_x000D_
.scissors {_x000D_
display: inline-block;_x000D_
font-size: 50px;_x000D_
color: red;_x000D_
}_x000D_
.original {_x000D_
color: initial;_x000D_
}_x000D_
.flipped {_x000D_
transform: rotateZ(180deg);_x000D_
}_x000D_
.upward {_x000D_
transform: rotateZ(-90deg);_x000D_
}_x000D_
.downward {_x000D_
transform: rotateZ(90deg);_x000D_
}_x000D_
</style>_x000D_
_x000D_
</head>_x000D_
<body>_x000D_
<ul>_x000D_
<li>Original: <span class="scissors original">✂</span></li>_x000D_
<li>Flipped: <span class="scissors flipped">✂</span></li>_x000D_
<li>Upward: <span class="scissors upward">✂</span></li>_x000D_
<li>Downward: <span class="scissors downward">✂</span></li>_x000D_
</ul>_x000D_
</body>_x000D_
</html>Just adding a working demo for horizontal and vertical mirror flip.
.horizontal-flip {_x000D_
-moz-transform: scale(-1, 1);_x000D_
-webkit-transform: scale(-1, 1);_x000D_
-o-transform: scale(-1, 1);_x000D_
-ms-transform: scale(-1, 1);_x000D_
transform: scale(-1, 1);_x000D_
}_x000D_
_x000D_
.vertical-flip {_x000D_
-moz-transform: scale(1, -1);_x000D_
-webkit-transform: scale(1, -1);_x000D_
-o-transform: scale(1, -1);_x000D_
-ms-transform: scale(1, -1);_x000D_
transform: scale(1, -1);_x000D_
}<div class="horizontal-flip">_x000D_
Hello, World_x000D_
<input type="text">_x000D_
</div>_x000D_
<hr>_x000D_
<div class="vertical-flip">_x000D_
Hello, World_x000D_
<input type="text">_x000D_
</div>There's also the rotateY for a real mirror one:
transform: rotateY(180deg);
Which, perhaps, is even more clear and understandable.
EDIT: Doesn't seem to work on Opera though… sadly. But it works fine on Firefox. I guess it might required to implicitly say that we are doing some kind of translate3d perhaps? Or something like that.
That works fine with font icons like 's7 stroke icons' and 'font-awesome':
.mirror {
display: inline-block;
transform: scaleX(-1);
}
And then on target element:
<button>
<span class="s7-back mirror"></span>
<span>Next</span>
</button>
direction: rtl; is probably what you are looking for.
-moz-transform: scale(-1, 1);
-webkit-transform: scale(-1, 1);
-o-transform: scale(-1, 1);
-ms-transform: scale(-1, 1);
transform: scale(-1, 1);
The two parameters are X axis, and Y axis, -1 will be a mirror, but you can scale to any size you like to suit your needs. Upside down and backwards would be (-1, -1).
If you're interested in the best option available for cross browser support back in 2011, see my older answer.
Real mirror:
.mirror{_x000D_
display: inline-block; _x000D_
font-size: 30px;_x000D_
_x000D_
-webkit-transform: matrix(-1, 0, 0, 1, 0, 0);_x000D_
-moz-transform: matrix(-1, 0, 0, 1, 0, 0);_x000D_
-o-transform: matrix(-1, 0, 0, 1, 0, 0);_x000D_
transform: matrix(-1, 0, 0, 1, 0, 0);_x000D_
}<span class='mirror'>Mirror Text<span>You can user either
.your-class{
position:absolute;
-moz-transform: scaleX(-1);
-o-transform: scaleX(-1);
-webkit-transform: scaleX(-1);
transform: scaleX(-1);
filter: FlipH;
}
or
.your-class{
position:absolute;
transform: rotate(360deg) scaleX(-1);
}
Notice that setting position to absolute is very important! If you won't set it, you will need to set display: inline-block;
this is what worked for me for <span class="navigation-pipe">></span>
display:inline-block;
-moz-transform: rotate(360deg);
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=4);
just need display:inline-block or block to rotate. So basically first answer is good. But -180 didn't worked.
For cross browser compatibility create this class
.mirror-icon:before {
-webkit-transform: scale(-1, 1);
-moz-transform: scale(-1, 1);
-ms-transform: scale(-1, 1);
-o-transform: scale(-1, 1);
transform: scale(-1, 1);
}
And add it to your icon class, i.e.
<i class="icon-search mirror-icon"></i>
to get a search icon with the handle on the left
You could try box-reflect
box-reflect: 20px right;
see CSS property box-reflect compatibility? for more details
Source: Stackoverflow.com