Navigation

	Home Page
	Index
	All Pages

Quick Search

Advanced Search »

Contributor Links

	Create a new Page
	Administration
	File Management
	Login/Logout
	Your Profile

Other Wiki Sections

Software

Discuss (0) History Attachments

Rotating Text with CSS

RSS

Modified on Wed, Sep 21, 2011, 11:58 AM by Administrator Categorized as HTML and 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).

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>