如何镜像/翻转表情符号？答案

【问题标题】：how to mirror / flip emoji?如何镜像/翻转表情符号？
【发布时间】：2021-10-18 16:02:58
【问题描述】：

我想在我的简单 HTML/CSS 网站上使用表情符号。这个想法是使用表情符号作为页面末尾的“下一个”和“上一个”按钮（见截图）。通过代码插入简单的表情符号是没有问题的，但是有没有办法镜像/翻转表情符号，让它们从右到左显示（就像截图中的小白鞋一样）？

或者是将表情符号作为 png 导出的唯一可能性？

【问题讨论】：

您好，使用图像进行导航是个坏主意，除非您明确指定这些图像/图标的用途。起初，这些对我来说似乎不是“下一步/返回”导航按钮。你能分享你的代码，以便社区可以更好地帮助你吗？你在使用任何表情符号库吗？您是否尝试过 CSS3 transform 属性来“翻转”您的图像/表情符号？参考：css-tricks.com/snippets/css/flip-an-image
亲爱的 Nitin，感谢您的回答。以后我会分享代码！是否有最佳实践如何做到这一点？也许就像 Spectric 在他的回答中所做的那样？我还注意到我的问题被否决了（-2）为什么会这样？我确实使用了礼貌的语言，保持简短并添加了屏幕截图。我怎样才能提高我的提问技巧？至于手头的问题：“转换”成功了！我也在考虑按照您的建议将文本标签“返回”和“下一步”:)。现在我还在开发这个网站，还没有用户测试过，所以非常感谢你的反馈。
不客气！至于否决票，我不确定是谁做的以及为什么做的。让我分享一些可能会消除您的疑虑的链接。 :) stackoverflow.com/help/how-to-ask | w3.org/TR/WCAG21 | w3.org/TR/wai-aria-practices-1.1

【解决方案1】：

您可以使用transform 属性：

.emote {
  transform:scale(-1, 1);
  width:fit-content;
}

body{
  font-size:50px;
}

<div class="emote">?</div>
<br/>
?

【讨论】：

【解决方案2】：

您可能可以在您的 CSS 代码中为该图像标签使用 transform: scaleX(-1);

【讨论】：