翻转箭头字符

Question

你好，我发现了这个我喜欢的箭头 ➣ ➣，我试图找到它的相反方向，但似乎找不到。我注意到当我在这个页面上找到它时：http://character-code.com/arrows-html-codes.php 有另一个代码 (➣)，但这只是生成相同的右箭头，而我需要一个左箭头。

这个左箭头不存在吗？

- Austin

---

如果不存在，则可以使用CSS旋转将其包装在元素中并将其旋转180度。 - Mouser

@Mouser 太棒了！这对于移动设备的浏览体验有多好？它能在他们的浏览器上正常工作吗？ - Austin

不太清楚。 我在Windows Phone 8.1上看到的箭头。 Caniuse应该能提供答案。 - Mouser

对于iPhone，transform仅在iOS v8.1及以上版本中支持，并带有-webkit前缀：请参见此处。 - ygesher

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

- Mouser

---

请注意，CSS 变换不适用于像 <span> 这样的内联元素。您需要指定 display:block; 或 display:inline-block 才能使其在内联元素上工作。http://jsfiddle.net/webtiki/rd4v6heb/ - web-tiki

@web-tiki IE似乎可以很好地处理内联元素。 - Mouser

你是对的，我刚在IE 11上测试了一下，transform确实可以应用于内联元素。但根据规范，内联元素不是可变形元素，因此它不应该起作用。 - web-tiki

@Web-tiki；尽管如此，IE仍然可能是唯一能够做到这一点的浏览器。您的评论仍然很有帮助。 - Mouser

我刚在Chrome和FF中进行了测试，它们不会转换没有display:inline-block;的span。 - web-tiki

Answer 2

U+27A3三维底部发光向右箭头没有相应的反向字符。一个足够的证据是，如果您在Unicode字符数据库中搜索包含THREE-D名称的字符，例如使用BabelMap，您只会找到U+27A3和U+27A2三维顶部发光向右箭头。如果有一个对应的向左字符，它的名称几乎肯定是类似的，只是将RIGHTWARDS替换为LEFTWARDS。

@Mouser提出了不错的解决方法，但我认为应该回答所提出的问题。

- Jukka K. Korpela

---

是的，这个问题也值得一个恰当的答案！很好地深入研究了。 - Mouser