Rotating 90 degrees in CSS in IE8 and lower

Question

How can I rotate 90 degrees in IE 8 and lower, using only CSS?

.horizontal {
   display: block;
   width: 300px;
   height: 100px;/*height*/
   background: #FF0000;
   margin: auto;
   margin-top: 110px;
   text-align: center;
   border: 5px solid #000000;

   -webkit-transform: rotate(-90deg);
   -moz-transform: rotate(-90deg);
   -o-transform: rotate(-90deg);
   -ms-transform: rotate(-90deg);
   transform: rotate(-90deg);
}

Answer 1

writing-mode which is currently in the CSS3 draft specification allows us to accomplish text rotation without using propriety properties, effectively future proofing the concept as more browsers adopt the CSS3 draft spec.

p { writing-mode: tb-rl; }

That’s it incredibly simple CSS technique that will eventually work with all browsers as their CSS3 support gets better. This is one of the handful of CSS3 supported properties in IE. The tb-rl value tells the browser to display paragraphs with the text flowing from top to bottom, right to left. Essentially rotating the text 90 degrees clockwise and aligning to the right.

This properties true intention is for displaying other languages in their correct “writing mode” such as Japanese right to left or Arabic & Hebrew which display right to left & top to bottom (rl-tb).

Support

At the moment IE is the only browser to support it starting from IE5.5 and up, IE8 adds further values through using the -ms extension. There are 4 values available from IE5.5+ and an additional 4 values for IE8+ through the -ms extension.

• lr-tb – This is the default value, left to right, top to bottom
• rl-tb – This flows the text from right to left, top to bottom
• tb-rl – Flows the text vertically from top to bottom, right to left
• bt-rl – bottom to top, right to left
• tb-lr – This and the followings value are only available in IE8+ using -ms-writing-mode. Text flows top to bottom, left to right
• bt-lr – Bottom to top, left to right
• lr-bt – Left to right, bottom to top
• rl-bt – Right to left, bottom to top

Rotate text in other browsers?

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

Online Demo

-ms-writing-mode property

Answer 2

You want to use filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);

CSS

.horizontal {
    display: block;
    width: 300px;
    height: 100px;/*height*/
    background: #FF0000;
    margin: auto;
    margin-top: 110px;
    text-align: center;
    border: 5px solid #000000;

    -webkit-transform: rotate(-90deg);
    -moz-transform: rotate(-90deg);
    -o-transform: rotate(-90deg);
    -ms-transform: rotate(-90deg);
    filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
    transform: rotate(-90deg);
}

More information on this