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

Question

我想在我的简单 HTML/CSS 网站上使用表情符号。

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

Oo 是唯一可以将表情符号视为 PNG 的方法，将它们导出为设置的 PNG 图像？

Answer 1

您可以使用

transform

属性：

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

body{
  font-size:50px;
}

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

Answer 2

您可以在 CSS 代码中为该图像标签使用

transform: scaleX(-1);

Answer 3

.emote {
    transform:scale(-1, 1);
    width:fit-content;
}
body{
    font-size:50px;
}

<div class="emote">💪🏽</div>
<br/>
💪🏽

Answer 4

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

body{
  font-size:50px;
}

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

Answer 5

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

body{
  font-size:50px;
}

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