CSS3 text rotate

Question

How do I acheive the following using CSS3 text-rotate

I am looking at using 2 floated elements (one just with the text and other for right panel) with a container..

Any workaround to make it work in IE8 would also be appreciated..

Answer 1

Use

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

on the element. (Might be 90, not -90 – you'll have to check!). The IE one just takes values of 1,2,3,4 representing each 90˚ rotation.

Answer 2

check this http://snook.ca/archives/html_and_css/css-text-rotation

write like this

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

& for IE you can use filter for this

filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);

check the fiddle http://jsfiddle.net/sandeep/w7vZd/12/

& for IE8 you can conditional comment or IE css hacks.