你可以使用 CSS 来镜像/翻转文本吗？
Posted
技术标签:
【中文标题】你可以使用 CSS 来镜像/翻转文本吗？【英文标题】：Can you use CSS to mirror/flip text? 【发布时间】：2011-07-21 08:28:05 【问题描述】：是否可以使用 CSS/CSS3 来镜像文本？
具体来说，我有这个剪刀字符“✂”(✂)，我想显示它指向左而不是右。
【问题讨论】：
如果剪刀图像由于某种原因不适合你，我看到它是用 %% 伪造的 看到这个线程：***.com/questions/3433641/… [1]：***.com/questions/3433641/… Micheal 的回答更准确。你能更新正确的答案吗？因为您标记为正确的答案不是镜像，而是旋转 180 度。 @PeteWilson, ? ✂ 字符很常见吗？它是做什么用的？ 请注意，根据表情符号的实现，旋转会有所不同。在 Apples 表情符号集上，它指向下方。 【参考方案1】：您可以使用 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>【讨论】：
这肯定是不符合标准的答案，不幸的是，我们还没有生活在一个实际上适用于所有用例的世界中。 您能否在答案中包含实际的浏览器前缀，最后一个非前缀？你给它的 CSS 不起作用。 @SerranoPereira 确实，感谢您的建议。答案已修改。 这应该是正确的答案，因为它是一面真正的镜子。选择的答案只是一个旋转，在不对称的情况下任何东西都不会提供镜像。 请注意，CSS transform doesn't work on inline elements 喜欢 Foundation 建议的 标签，除非您还给出了 display: inline-block。【参考方案2】：-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。
【讨论】：
技术上这不是一面镜子。它旋转。所以它只适用于某些类型的元素 在我将 display: inline-block 添加到我的跨度（使用 pictos 字体）之前，我在 Chrome 中遇到了一些问题 鉴于当提出这个问题时，浏览器转换并未得到广泛支持，我认为这是正确的答案。事实上，直到 IE 9 才支持转换，所以我认为这仍然是正确的答案，至少在一段时间内。 这个答案是错误的，它不是镜子。它只适用于这种情况，因为示例中给出的符号是垂直不对称的。 虽然这本身很有用，但它并不是所提出的确切问题的答案。我通过搜索引擎找到了这个问题，因为我想水平翻转图像。它不像 OPs 剪刀那样对称。【参考方案3】：真镜：
.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>【讨论】：
你应该总是把standards-compliant (non-prefixed)属性放在最后，这样当浏览器采用标准时，它会使用基于标准的版本而不是 (older, buggier) 前缀版本。在这种情况下，这意味着“变换：matrix(-1, 0, 0, 1, 0, 0);”应该是 last 属性。 （编辑答案以反映这一点。） 我不知道这应该是正确答案还是问题，但我想让 fontawesome / bootstrap 用户了解fa-flip-horizontal 和 fa-flip-vertical 属性
很好的真实答案。然而 display:block;不一定需要。
是的...显示：块；或需要内联块
这对于在沿 Y 轴旋转时保持元素背面的正确文本方向非常有帮助。例如：backface-visibility: visible; transform-origin: center center; transform-style: preserve-3d; transform: matrix(-1, 0, 0, 1, 0, 0) rotateY(180deg) ;【参考方案4】：
你可以使用任何一个
.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;
【讨论】：
【参考方案5】：我通过搜索互联网拼凑出这个解决方案，包括
堆栈溢出答案， MSDN 文章， http://css-tricks.com/almanac/properties/t/transform/, http://caniuse.com/#search=transform, http://browserhacks.com/ 和 http://www.useragentman.com/IETransformsTranslator/。此解决方案似乎适用于所有浏览器，包括 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);
【讨论】：
【参考方案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>
获取带有左侧手柄的搜索图标
【讨论】：
【参考方案7】：还有rotateY 用于真实镜像：
transform: rotateY(180deg);
这也许更清晰易懂。
编辑： 不过似乎在 Opera 上不起作用……很遗憾。但它在 Firefox 上运行良好。我想可能需要含蓄地说我们正在做某种translate3d？或者类似的东西。
【讨论】：
对于那些想知道这是 3D 变换的人。我认为它绝对比之前给出的比例和矩阵方法更具可读性/可理解性。 我不明白旋转是如何成为一面镜子的——只有在一种特殊情况下才会如此。 @celsharp 它位于 Y 轴上，因此您可以从背面看到图像/元素，因此是镜像的。【参考方案8】：您可以使用“转换”来实现此目的。 http://jsfiddle.net/aRcQ8/
css:
-moz-transform: rotate(-180deg);
-webkit-transform: rotate(-180deg);
transform: rotate(-180deg);
【讨论】：
我相信这在技术上不是镜像的（仅在某些情况下除外，例如具有中心对称的形状）。【参考方案9】：只需添加一个用于水平和垂直镜像翻转的工作演示。
.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>【讨论】：
【参考方案10】：再举一个如何翻转角色的例子。如果需要，请添加供应商前缀，但目前所有现代浏览器都支持无前缀转换属性。唯一的例外是 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】：这对我有用 <span class="navigation-pipe">&gt;</span>
display:inline-block;
-moz-transform: rotate(360deg);
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=4);
只需要 display:inline-block 或 block 来旋转。所以基本上第一个答案是好的。但是 -180 没有用。
【讨论】：
【参考方案12】：你可以试试 box-reflect
box-reflect: 20px right;
查看CSS property box-reflect compatibility?了解更多详情
【讨论】：
box-reflect 是 webkit 唯一的属性。但我认为它没有 -moz- 等价物。检查this post.. 分隔符也应该是: 而不是;【参考方案13】：
这适用于's7 stroke icons' 和'font-awesome' 等字体图标：
.mirror
display: inline-block;
transform: scaleX(-1);
然后在目标元素上：
<button>
<span class="s7-back mirror"></span>
<span>Next</span>
</button>
【讨论】：
【参考方案14】：direction: rtl; 可能就是您要找的。p>
【讨论】：
【参考方案15】：我们可以使用非常少的代码，使用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>【讨论】：
以上是关于你可以使用 CSS 来镜像/翻转文本吗？的主要内容，如果未能解决你的问题，请参考以下文章
PPT/PDF：如何显示我的幻灯片的镜像版本？ （翻转或失败）
如何在 Swift（Xcode 6.3）中翻转标签（获取镜像视图）
css 镜像（水平翻转图像）。欲了解更多信息，请访问https://css-tricks.com/snippets/css/flip-an-image/