Rotating text with CSS


Many of the browsers support the ability to rotate the text I found but most of all the CSS tricks are really sucks in Opera :( even the IE6 support it *god* after i find the site http://www.inwardpath.com.au (but this sucks in IE6, I don’t support IE6 but still a some percentages of people using this “Jambavan” Browser) I found an another technique to rotate works in all major browsers


-webkit-transform: rotate(270deg);
-moz-transform: rotate(270deg);
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
width:29px;
height:80px;
position:absolute;
text-align:left;
z-index:999;
overflow: visible;
-moz-transform: rotate(90deg);
-moz-rotation-point: 0 0;
-webkit-transform: rotate(90deg);
-webkit-rotation-point: 0 0;
-o-transform: rotate(270deg);

Support IE8,7,5 FF, Opera, Chrome, Safari
this will work in all major browsers with some minor spacing issue,

and an another option is forget about the IE6 and let him die

and use this

overflow: visible;
position: absolute;
width: 38px;
-moz-transform: rotate(90deg);
-moz-rotation-point: 0 0;
-webkit-transform: rotate(90deg);
-webkit-rotation-point: 0 0;
-o-transform: rotate(90deg);
-ms-writing-mode: tb-lr;
* html writing-mode: tb-lr;

About these ads

2 thoughts on “Rotating text with CSS

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s