why css transform rotate make text ugly

Question

some browser (for me: firefox & chrome on XP) don't seem to apply anti-aliasing on text with CSS rotation

exemple: http://dabblet.com/gist/4281185

Why they apply on images but not text ?

Answer 1

Use 3D transforms. Using 3D transform properties, even if you're not actually doing any 3D transforms can enhance performance as follow:

1. It'll kick on the ol' GPU and get smoother performance.
2. It will crap-up (thin out) the text in the default state of the button, so it's not a suprise when the transition starts.

WebKit has that nasty (I'd call it a bug) where text being transformed/transitioned looks all thin and crappy. The text will look good by default but you'll get flashing and thinning when the button is in transition or gets transformed.

hope this helps.

Answer 2

Bad text quality is obviously "fault" of web browser you use, but you should just wait some time and it should be fixed. As web developers learn how to use new features, browser programmers must implement them, and that takes some time to work correctly. Check it in next version of the browser - if text rotation will be growing more and more popular browsers will handle it better, to display more web pages correctly.