CODEWITHSUNDEEP
htmlcssunicodeemoji
Anna Mei
Anna Mei

Reputation: 137

How to mirror / flip an emoji?

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?

screenshot

Upvotes: 6

Views: 12562

Answers (2)

Hadi Ali
Hadi Ali

Reputation: 11

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

Upvotes: 1

Spectric
Spectric

Reputation: 32002

You can use the transform property:

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

body{
  font-size:50px;
}
<div class="emote">šŸ˜‰</div>
<br/>
šŸ˜‰

Upvotes: 9

Related Questions