翻转箭头字符答案

【问题标题】：Flip an arrow character翻转箭头字符
【发布时间】：2015-03-15 12:25:33
【问题描述】：

您好，我找到了我喜欢的这个箭头 ➣ &#10147;，我试图为这个箭头找到相反的方向，但似乎找不到。我注意到，当我在此页面上找到它时：http://character-code.com/arrows-html-codes.php 列出了一个附加代码 (&#x27a3;)，但是当我需要一个左箭头时，这只会产生相同的右箭头。

这个左箭头不存在吗？

【问题讨论】：

如果不存在，您可以将其包装在一个元素中并使用 css rotate 将其旋转 180 度。
@Mouser 太棒了！这对于移动设备观看有多“好”？它适用于他们的浏览器吗？
不知道。我在 windows phone 8.1 上看到的箭头。 Caniuse 应该提供答案。
对于 iPhone，transform 仅从 iOS v8.1 开始支持，带有 -webkit 前缀：请参阅 here

标签： html css ascii

【解决方案1】：

<span>&#10147;</span>

span {
  transform: rotate(180deg);
  display: inline-block;
}

这不提供相反的 unicode 箭头。它将原始箭头旋转 180 度。

更好的是水平翻转箭头。这个 CSS 应该这样做。

transform: scale(-1);
filter: flipH;
-ms-filter: flipH;

span.rotate {
  transform: rotate(180deg);
  display: inline-block;
}

div.flipped {
  display: inline-block;
  -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>Rotated
  <span class="rotate">&#10147;</span>
</div>

<div>Flipped
  <div class="flipped">&#10147;</div>
</div>

【讨论】：

请注意，css 转换不适用于像 <span> 这样的内联元素。您需要指定 display:block; 或 display:inline-block 才能使其在行内元素上工作。 jsfiddle.net/webtiki/rd4v6heb
@web-tiki IE 似乎可以很好地使用内联元素。
你是对的，刚刚在 IE 11 上进行了测试，并且转换应用于内联元素。但根据the specs，内联元素不是可转换的元素，因此它不应该工作。
@web-tiki;仍然 IE 可以是唯一这样做的。您的评论仍然有帮助。
我刚刚在 chrome 和 FF 中进行了测试，没有display:inline-block;，它们不会转换跨度

【解决方案2】：

没有对应于 U+27A3 三-D BOTTOM-LIGHTED RIGHTWARDS ARROWHEAD 的反方向字符。一个充分的证据是，如果您搜索 Unicode 字符数据库，例如使用BabelMap，对于名称包含三D 的字符，您只能找到U+27A3 和U+27A2 三D 顶光右箭头。如果有一个对应的向左字符，则几乎可以肯定其名称相似，只是将 RIGHTWARDS 替换为 LEFTWARDS。

@Mouser 提出了很好的解决方法，但我认为所提出的问题也值得回答。

【讨论】：

是的，这个问题也值得一个正确的答案！很好的挖掘。