是否可以使用CSS / CSS3镜像文本？
具体来说，我有这个剪刀字符“✂”（✂），我想显示指向左边而不是右边。
答案 0 :(得分：367)
您可以使用CSS转换来实现此目的。水平翻转将涉及缩放div，如下所示：
-moz-transform: scale(-1, 1);
-webkit-transform: scale(-1, 1);
-o-transform: scale(-1, 1);
-ms-transform: scale(-1, 1);
transform: scale(-1, 1);
垂直翻转会涉及缩放div，如下所示：
-moz-transform: scale(1, -1);
-webkit-transform: scale(1, -1);
-o-transform: scale(1, -1);
-ms-transform: scale(1, -1);
transform: scale(1, -1);
span{ display: inline-block; margin:1em; }
.flip_H{ transform: scale(-1, 1); color:red; }
.flip_V{ transform: scale(1, -1); color:green; }<span class='flip_H'>Demo text</span>
<span class='flip_V'>Demo text</span>
答案 1 :(得分：64)
-moz-transform: scale(-1, 1);
-webkit-transform: scale(-1, 1);
-o-transform: scale(-1, 1);
-ms-transform: scale(-1, 1);
transform: scale(-1, 1);
两个参数是X轴，Y轴，-1将是一个镜像，但您可以缩放到任何您喜欢的尺寸以满足您的需要。颠倒和倒退将是(-1, -1)。
如果您对2011年提供的跨浏览器支持的最佳选择感兴趣，请参阅my older answer。
答案 2 :(得分：49)
真镜：
.mirror{
display: inline-block;
font-size: 30px;
-webkit-transform: matrix(-1, 0, 0, 1, 0, 0);
-moz-transform: matrix(-1, 0, 0, 1, 0, 0);
-o-transform: matrix(-1, 0, 0, 1, 0, 0);
transform: matrix(-1, 0, 0, 1, 0, 0);
}<span class='mirror'>Mirror Text<span>
答案 3 :(得分：8)
您可以使用
.your-class{
position:absolute;
-moz-transform: scaleX(-1);
-o-transform: scaleX(-1);
-webkit-transform: scaleX(-1);
transform: scaleX(-1);
filter: FlipH;
}
或
.your-class{
position:absolute;
transform: rotate(360deg) scaleX(-1);
}
请注意，将position设置为absolute非常重要！如果您不设置它，则需要设置display: inline-block;
答案 4 :(得分：6)
我通过搜索互联网来拼凑这个解决方案，包括
此解决方案似乎适用于所有浏览器，包括IE6 +，必要时使用scale(-1,1)（正确的镜像）和适当的filter / -ms-filter属性（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);
}
答案 5 :(得分：6)
对于跨浏览器兼容性，请创建此类
.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);
}
并将其添加到您的图标类，即
<i class="icon-search mirror-icon"></i>
获取左侧手柄的搜索图标
答案 6 :(得分：3)
你可以使用'transform'来实现这一目标。 http://jsfiddle.net/aRcQ8/
的CSS：
-moz-transform: rotate(-180deg);
-webkit-transform: rotate(-180deg);
transform: rotate(-180deg);
答案 7 :(得分：1)
还有一个真正的镜像rotateY：
transform: rotateY(180deg);
或许更清楚易懂。
编辑：虽然似乎没有在Opera上工作......但遗憾的是。但它在Firefox上运行良好。我想可能需要隐含地说我们正在做某种translate3d？或类似的东西。
答案 8 :(得分：1)
只需添加水平和垂直镜像翻转的工作演示。
.horizontal-flip {
-moz-transform: scale(-1, 1);
-webkit-transform: scale(-1, 1);
-o-transform: scale(-1, 1);
-ms-transform: scale(-1, 1);
transform: scale(-1, 1);
}
.vertical-flip {
-moz-transform: scale(1, -1);
-webkit-transform: scale(1, -1);
-o-transform: scale(1, -1);
-ms-transform: scale(1, -1);
transform: scale(1, -1);
}<div class="horizontal-flip">
Hello, World
<input type="text">
</div>
<hr>
<div class="vertical-flip">
Hello, World
<input type="text">
</div>
答案 9 :(得分：0)
这对<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);
只需显示：内联块或块旋转。所以基本上第一个答案是好的。但-180没有用。
答案 10 :(得分：0)
再举一个例子，如何翻转角色。如果您需要添加供应商前缀，但目前所有现代浏览器都支持未加前缀的转换属性。唯一的例外是Opera，如果启用Opera Mini模式（约3％的世界用户）。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Text rotation</title>
<style type="text/css" media="screen">
.scissors {
display: inline-block;
font-size: 50px;
color: red;
}
.original {
color: initial;
}
.flipped {
transform: rotateZ(180deg);
}
.upward {
transform: rotateZ(-90deg);
}
.downward {
transform: rotateZ(90deg);
}
</style>
</head>
<body>
<ul>
<li>Original: <span class="scissors original">✂</span></li>
<li>Flipped: <span class="scissors flipped">✂</span></li>
<li>Upward: <span class="scissors upward">✂</span></li>
<li>Downward: <span class="scissors downward">✂</span></li>
</ul>
</body>
</html>
答案 11 :(得分：0)
direction: rtl;可能正是您想要的。
答案 12 :(得分：0)
我们可以使用很少的代码，使用 css keyframes 及其 alternate 属性制作非常酷的文本效果（尝试删除 alternate 以查看差异）：
span {
font-weight: 1000; font-size: 3.3em;
}
small {
display: inline-block;
font-size: 2.3em;
animation: 1s infinite alternate coolrotate
}
@keyframes coolrotate {
from {
transform: scale(1, 1) translate(-0.1em, 0)
}
to {
transform: scale(-1, 1) translate(0, 0)
}
}<span>
<span>c</span>
<small>o</small>
<span>o</span>
<small>L</small>
<small>...</small>
</span>答案 13 :(得分：-1)
答案 14 :(得分：-1)
与's7 stroke icons'和'font-awesome'之类的字体图标配合使用会很好：
.mirror {
display: inline-block;
transform: scaleX(-1);
}
然后在目标元素上：
<button>
<span class="s7-back mirror"></span>
<span>Next</span>
</button>