Jasinski Technical Wiki

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

PoweredBy

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

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>
  Name Size
- Firefox.png 3.80 KB

ScrewTurn Wiki version 3.0.1.400. Some of the icons created by FamFamFam. Except where noted, all contents Copyright © 1999-2018, Patrick Jasinski.