Rotating Text with CSS


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).


Sample Code

    border: 1px solid silver;
    -webkit-transform: rotate(-90deg);
    -moz-transform: rotate(-90deg);
    filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
    -webkit-transform: rotate(180deg);
    -moz-transform: rotate(180deg);
    filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=2);
    -webkit-transform: rotate(90deg);
    -moz-transform: rotate(90deg);
    filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1);
<table border="1">
        <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>