Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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.

like image 705
Robert Richter Avatar asked Aug 18 '13 13:08

Robert Richter


People also ask

How do you flip something horizontally in CSS?

Reversing the orientation of images is very easy with CSS, if somewhat counter-intuitive for those not mathematically inclined: to flip an image, you use a value of -1 with the CSS transform properties scaleX or scaleY , depending on whether you wish to flip the element horizontally or vertically.

How do you flip elements horizontally?

How do I flip my image? To flip an image or icon, simply: Select the object you would like to flip. Right click on that object, and select 'Flip Horizontal' or 'Flip Vertical'.”


1 Answers

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.

like image 166
Matt Bryant Avatar answered Oct 08 '22 07:10

Matt Bryant