Search code examples
csscss-transforms

Reflect a letter horizontally using CSS

I know how to reflect single letters vertically using transform: rotate(); but not how to reflect them horizontally.

Do you know how I can reflect them horizontally?

I want to use it with the selector .logo:first-letter {} for my logo.

<a href="#" class="logo">RR</a>

EDIT: http://jsfiddle.net/n7YA7/1/

Cant use Я because I'm using a font from google which doesn't support it.

Solution

  • Set the scaleX property as a transform.

    .logo:first-letter {
     transform: scaleX(-1);
 }

    If it's always a specific letter, it might be a better idea to just use unicode for this. In your case, CYRILLIC CAPITAL LETTER YA (Я) will work.