Showing posts with label transform:rotate. Show all posts
Showing posts with label transform:rotate. Show all posts

Saturday, 4 June 2011

Rotate text in Internet Explorer using CSS and Matrix transform...

Not sure about Internet Explorer 9 yet but there is an excellent online tool for calculating the correct values for Internet Explorer 6, 7 and 8 css filters:

Enter the degrees of rotation and click 'Set'

This will generate CSS for the equivalent values for Firefox, Safari/Chrome and Opera but these can now be more simply stated using, e.g.

-moz-transform:rotate(25deg);
-webkit-transform:rotate(25deg);
-o-transform:rotate(25deg);

The basic filter for IE only allows 90 degree rotations (0, 90, 180, 270) so if you want text or images at a jaunty angle it's not enough. It's worth the extra effort to keep text as text and not resort to imagery.

However, don't expect the text to be as smooth as in other, more capable browsers...

The maths