copenndthagen
copenndthagen

Reputation: 50790

CSS3 text rotate

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

enter image description here

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

Upvotes: 1

Views: 1712

Answers (2)

Rich Bradshaw
Rich Bradshaw

Reputation: 73045

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.

Upvotes: 2

sandeep
sandeep

Reputation: 92843

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.

Upvotes: 1

Related Questions