你能否使用CSS来镜像/翻转文本？

Question

能否使用CSS/CSS3来翻转文本？

具体而言，我有这个剪刀符号“✂”（✂），我想将其显示为向左指而不是向右。

- pistacchio

---

如果剪刀的图片因某种原因无法使用，我曾经看到过用%<和>%来伪造它。 - Pete Wilson

查看这个帖子：https://dev59.com/M3A75IYBdhLWcg3wK10p - Lucas Vall

迈克尔的答案更准确。请更新正确的答案吗？因为你标记为正确的答案不是镜面而是绕180度旋转。 - Sanket Sahu

@PeteWilson，✂字符这么常见吗？它有什么用途？ - Pacerier

+5 for nice question - Elyor

请注意，根据表情符号的实现，其旋转方向可能不同。在苹果的表情符号集中，箭头指向下方。 - Akkumulator

Answer 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>

- methodofaction

---

这确实是最符合标准的答案，不幸的是，我们还没有生活在一个所有用例都适用的世界中。 - Chris Sobolewski

你能在回答中包含实际的浏览器前缀，最后再给出非前缀吗？你提供的CSS并不能正常工作。 - Serrano

@SerranoPereira 确实，感谢您的建议。回答已经修正。 - methodofaction

这应该是正确的答案，因为它是一个真正的镜像。选择的答案只是旋转，对于任何不对称的东西都不能提供镜像图像。 - gregtzar

可能的附注：还可以镜像填充（padding-right: 10px;将在左侧显示10px填充），但不包括外边距。 - Marcel

请注意，CSS 变换不适用于内联元素，例如 Foundation 建议使用的 <i> 标签，除非你也给它们设置 display: inline-block。 - enigment

Answer 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年跨浏览器支持的最佳选项感兴趣，请查看我的旧答案。

- Chris Sobolewski

---

从技术上讲，这不是一面镜子，而是被旋转了。因此它只能与某些类型的元素配合使用。 - borisrorsvort

在使用Pictos字体时，我在Chrome浏览器中遇到了一些问题，直到我添加display:inline-block到我的span元素才解决了这个问题。 - Clarence Liu

考虑到在提出这个问题时，浏览器变换并没有得到广泛支持，我认为这是正确的答案。事实上，直到IE 9之前，变换都没有得到支持，因此我认为这仍然是正确的答案，至少还有一段时间。 - Chris Sobolewski

这个答案是错误的，它不是一个镜像。它只在这种情况下有效，因为示例中给出的符号是垂直不对称的。 - gregtzar

虽然这本身很有用，但它并不是对所问问题的确切答案。我通过搜索引擎找到了这个问题，因为我想水平翻转一张图片。它不像OP的剪刀那样对称。 - gillytech

以前的评论不再相关，因为现在正确的答案建议使用scale而不是rotate(-180deg)。 - keeri

Answer 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>

- Cícero Verneck Corrêa

---

您应该始终将符合标准的（非前缀）属性放在最后，这样当浏览器采用标准时，它将使用基于标准的版本而不是（旧的、有错误的）带前缀的版本。在这种情况下，这意味着"transform: matrix(-1, 0, 0, 1, 0, 0);" 应该是最后一个属性。（已编辑答案以反映此更改。） - Jay Dansand

我不确定这个应该放在正确答案还是问题上，但我想让fontawesome/bootstrap的用户知道fa-flip-horizontal和fa-flip-vertical属性。 - lol

很好的实际答案。然而，display:block;并不一定需要。 - Gilly

是的...需要使用display:block;或inline-block。 - dGo

当元素沿 Y 轴旋转时，保持正确的背面文本方向非常重要。例如：backface-visibility: visible; transform-origin: center center; transform-style: preserve-3d; transform: matrix(-1, 0, 0, 1, 0, 0) rotateY(180deg) ;这对于保证元素的背面文本方向正确非常有帮助。 - parliament

Answer 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;

- Emanuela Colta

Answer 5

我通过搜索互联网，包括：

• Stack Overflow答案，
• 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);
}

- Jay Dansand

Answer 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>

将搜索图标与句柄放在左侧

- Michael

Answer 7

还有一个真正的镜像效果可以使用rotateY：

transform: rotateY(180deg);

也许更加清晰易懂。编辑：不过在Opera上似乎不能工作……遗憾。但在Firefox上可以正常工作。我猜可能需要明确地说明我们正在进行某种translate3d操作？或者类似的操作。

- jeromej

---

对于那些好奇的人，这是一个3D变换。我认为相比之前给出的缩放和矩阵方法，它绝对更易读/理解。 - gregtzar

我不明白旋转怎么会是镜像 - 这只有在一个特殊情况下才会出现这种情况。 - cel sharp

@celsharp 它在Y轴上，所以你从它的背面看到图像/元素，因此是镜像的。 - jeromej

Answer 8

您可以使用“transform”来实现这一点。 http://jsfiddle.net/aRcQ8/

CSS：

-moz-transform: rotate(-180deg);
-webkit-transform: rotate(-180deg);
transform: rotate(-180deg);

- Rito

---

我相信从技术上讲，这并不是镜像的（除了一些特殊情况，例如具有中心对称性的形状）。 - jeromej

Answer 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>

- niyasc

Answer 10

使用像s7 stroke icons和font-awesome这样的字体图标可以很好地实现此目标：

.mirror {
  display: inline-block;
  transform: scaleX(-1);
}

然后，在目标元素上：

<button>
  <span class="s7-back mirror"></span>
  <span>Next</span>
</button>

- Dmitry Anch