Text Rotation with CSS

Thankfully, many of the popular browsers of today support the ability to rotate HTML elements. Even better? Wed can make it work in Internet Explorer (back to version 5.5 even).  For Webkit and Firefox (as of 3.5), you can take advantage of the proposed transform property to handle the rotation. Each browser requires its property prefix for now.

-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);

In order to perform a transformation, the element has to be set to display:block. In this case, just add the declaration to the span that you want to rotate.

When it comes to effects in Internet Explorer, there is a surprising amount of power (and untapped at that, I’d say) in using filters. Although misleading, there is a filter called BasicImage that offers up the ability to rotate any element that has layout.

filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);

The rotation property of the BasicImage filter can accept one of four values: 0, 1, 2, or 3 which will rotate the element 0, 90, 180 or 270 degress respectively.

Leave a Reply

Your email address will not be published. Required fields are marked *