你可以使用 CSS 来镜像/翻转文本吗？答案

【问题标题】：Can you use CSS to mirror/flip text?你可以使用 CSS 来镜像/翻转文本吗？
【发布时间】：2011-07-21 08:28:05
【问题描述】：

是否可以使用 CSS/CSS3 来镜像文本？

具体来说，我有这个剪刀字符“✂”(&#9986;)，我想显示它指向左而不是右。

【问题讨论】：

如果剪刀图像由于某种原因不适合你，我看到它是用 %% 伪造的
看到这个线程：stackoverflow.com/questions/3433641/… [1]：stackoverflow.com/questions/3433641/…
Micheal 的回答更准确。你能更新正确的答案吗？因为您标记为正确的答案不是镜像，而是旋转 180 度。
@PeteWilson, ? ✂ 字符很常见吗？它是做什么用的？
请注意，根据表情符号的实现，旋转会有所不同。在 Apples 表情符号集上，它指向下方。

标签： html css

【解决方案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 &#9986;</span>
<span class='flip_V'>Demo text &#9986;</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);
}

&lt;span class='mirror'&gt;Mirror Text&lt;span&gt;

【讨论】：

你应该总是把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">&#9986;</span></li>
    <li>Flipped: <span class="scissors flipped">&#9986;</span></li>
    <li>Upward: <span class="scissors upward">&#9986;</span></li>
    <li>Downward: <span class="scissors downward">&#9986;</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>

【讨论】：