How to mirror / flip an emoji?

Question

I would like to use emoji on my simple HTML/CSS website.

The idea is to use an emoji as the "next" and "previous" buttons at the end of a page (see screenshot). Inserting a simple emoji via code is no problem, but is there a way to mirror / flip the emoji, so that they show from right to left (like the white shoes in the screenshot)?

Or is the only possibility here to treat the emojis as PNGs, by exporting them as set PNG images?

Cocky

Hi, using images for navigation is a bad idea unless you clearly specify the purpose of those images/icons. At first, those did not appear to be a "next/back" navigation buttons to me. Can you share your code so that the community can help you better? Are you using any Emoji library? Have you tried CSS3 transform property to "flip" your image/emoji? Reference: css-tricks.com/snippets/css/flip-an-image – Gunas

Dear Nitin, hank you for your answer. In the future I will share the code! Is there a best practice how to do that? Maybe like Spectric did in his answer? Also I noticed that my question was downvoted (-2) why is that? I did use polite language, kept it short and added a screenshot. How can I improve my question-asking-skill? As for the question at hand: "transform" did the trick! I am also considering putting textlabels "back" and "next" as you proposed :). Right now I am still working the site out and have not user tested it yet, so thank you a lot for the good feedback. – Cocky

You're welcome! As for the downvotes, I am not sure who did it and why. Let me share few links that might clear your doubts. :) stackoverflow.com/help/how-to-ask | w3.org/TR/WCAG21 | w3.org/TR/wai-aria-practices-1.1 – Gunas

Does this answer your question? Can you use CSS to mirror/flip text? – Miquelon

Answer 1

You can use the transform property:

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

body{
  font-size:50px;
}

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

Chancellorsville

Ha, ha! Magic. :D Thank yoou very much, the "transform" property did the trick! – Cocky

Answer 2

You can probably use transform: scaleX(-1); in your CSS code for that image tag

Unrepair