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.
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 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'.”
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.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With