CSS Flip Letter Horizontally [closed]

Question

I want to create a small project where a user enters in a word (preferably a palindrome) and the second half is flipped. Like the good ol' ABBA logo but the other way around.

I have been reading quite a few pages but none have satisfied my need. I thought about using SVG's <text> element but I didn't quite understand some things about it.

Basically, my expected output would be something like this:

This is just a dodgy image I whipped up and it's not a great example because a B rotated 180 degrees can look like one flipped horizontally depending on the font.

What I'm basically asking is, is what I'm after achievable with CSS and/or JavaScript?

Answer 1

.fliph {
  display: inline-block;
  vertical-align: top;
  transform: scaleX(-1); /* Or also:   rotateY(180deg) */
  -ms-filter: fliph;
  filter: fliph;
}

A<span class="fliph">B</span>BA