Rotating Text with CSS

Overview

This article gives an example of how to rotate text using CSS. The results of the sample code below look like the following in Firefox, and similarly in other browsers (although IE required further adjustments).

Image

Sample Code

<html>
<head>
<style>
td
{
    border: 1px solid silver;
}
.rot90
{
    -webkit-transform: rotate(-90deg);
    -moz-transform: rotate(-90deg);
    filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
}
.rot180
{
    -webkit-transform: rotate(180deg);
    -moz-transform: rotate(180deg);
    filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=2);
}
.rot270
{
    -webkit-transform: rotate(90deg);
    -moz-transform: rotate(90deg);
    filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1);
}
</style>
</head>
<body>
<table border="1">
    <tr>
        <td>Normal text</td>
        <td class='rot90'>Rotated 90</td>
        <td class='rot180'>Rotated 180</td>
        <td class='rot270'>Rotated 270</td>
        <td>Normal text<br/><br/><br/><br/><br/><br/></td>
    </tr>
</table>

</body>
</html>