CSS: Rotate Text / Image Elements by 90, 180 or 270 Degrees

by Yang Yang on August 25, 2009

As a quick digest of this article by Jonathan. You can literally rotate any HTML element by a certain degree with CSS, be it text or image or something else. After testing across a few modern browsers, the only one that’s not supporting this rotation technique is Opera.

The CSS rules you need for a rotation of 90 degrees:

/* for firefox, safari, chrome, etc. */
-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
/* for ie */
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);

That’s it.

Subscribe to Kavoir: blog feed

You should also read:

Andre January 9, 2010 at 12:09 am

In Opera 10.50 (currently in alpha at this point), you can do the same thing:

-o-transform: rotate(-90deg);

BTW I am always tempted to put in the non-prefixed version, just in case one browser supports the CSS3 attribute without requiring the prefix. More on Opera’s support for CSS3 transitions can be found here:

http://dev.opera.com/articles/view/css3-transitions-and-2d-transforms/

Yang Yang January 26, 2010 at 1:24 pm

Thanks for the tip, Andre!

harik4ever February 20, 2010 at 1:22 am

Hi, I tried this way…its working but its rotating it horizontally, how to rotate it vertically?

Yang Yang February 26, 2010 at 6:14 pm

Changing the degree values?

webdev March 11, 2010 at 6:39 pm

Works great in IE and Firefox, amazing! Thanks, tire of rotating the same image 4 times for rounded corners.

wee March 18, 2010 at 9:22 am

will it pass css validation?

Tanuj March 25, 2010 at 8:46 pm

thanks for give this useful information

Jordan March 30, 2010 at 11:59 pm

Very cool. Thanks for the info. Looking forward to CSS3 and HTML5.

Brian May 4, 2010 at 5:05 pm

No, the Filter property will not validate… but then again, neither will WebKit or Mozilla properties…

Yang Yang May 4, 2010 at 8:34 pm

Validation is for suckers.

NeerAJ May 25, 2010 at 12:48 pm

I Really Thanks for this Wabsite for my Usefull Informatuion.

Dave June 29, 2010 at 3:13 pm

After using these properties, image quality goes off.

Don’t know what to do

Dave June 29, 2010 at 3:15 pm

Also image is not aligned properly. after using these properties. please help.

Thanks in advance

Jim July 7, 2010 at 9:14 am

Can this be used to rotate a video feed. I have a web cam pointing down a room and need to rotate the image to make it view best on my web page.

Martin July 8, 2010 at 7:45 pm

Does this work with ie 6 and 7

angelz to Martin July 23, 2010 at 4:47 am

Who the hell cares if it works on IE6? maybe you still use some computer with Norton Commander as basic OS?

vipul August 31, 2010 at 4:20 pm

/* for firefox, safari, chrome, etc. */
-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
-o-transform: rotate(-90deg);/* For Opera*/
-khtml-transform: rotate(-90deg);/* For Lunix*/
/* for ie */
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);

Vipula March 30, 2012 at 8:28 pm

Can you provide me the complete CSS code. and how it can be inserted to the html.Thanks

sk September 13, 2010 at 6:39 pm

Thanks it is really helpful stuff!!

Marco October 1, 2010 at 9:34 pm

Works terribly wrong inside tables. The cellwidth is equal to the length (now height!) of the text. So this can’t be used for vertical table headers…

John October 19, 2010 at 2:55 pm

I tried to use the I.E. version to rotate a copy of an image under the original like a reflection and its not working. Here is the code

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

John October 19, 2010 at 3:25 pm

I also tried:
.rotate{
-ms-filter: “progid:DXImageTransform.Microsoft.BasicImage(rotation=3)”;
}
for I.E. 8 without success.

John October 20, 2010 at 2:54 am

Update: I had more than one filter in the css class which caused the rotation to not work. After I combine the two filters the rotation worked. My fault…

-ms-filter: “progid:DXImageTransform.Microsoft.BasicImage(rotation=2) progid:DXImageTransform.Microsoft.Alpha(Opacity=60)”;

filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=2) alpha(opacity=60);

FYI the rotation works great,
thank you.

John December 2, 2010 at 3:01 am

“Who the hell cares if it works on IE6?”

People that realize that about 20% of their IE users still use it…

I, for one, questiont the wisdom of giving about 7-10% of your total users a bad experience just because you don’t feel like supporting a browser you personally feel is antiquated.

Theraisa K December 6, 2010 at 2:23 am

I can get the transform to work, but it appears to run down the middle of my screen. How do I get it to appear along the left edge of the screen? Like 5px from the left and 100px from the top, etc.?

Lou December 7, 2010 at 12:32 am

Where to hell are you menna put this massive link??

Roland Hentschel December 7, 2010 at 4:40 pm

Hi!

I think you should mention, that there needs to be a definition in the stylesheet:
position:absolute;

( -: roland :- )

Josh February 14, 2011 at 2:56 pm
juan March 9, 2011 at 5:38 am

blog01

Tom October 14, 2011 at 4:46 am

If you apply this filter as a class to a table, it will rotate the table on the webpage, but it will not print – whatever uses this class will be blank on the printed page. I’d be interested in knowing if there was a way to rotate something and print it correctly, not just rotate it on the page/browser/screen.

Tarun October 23, 2011 at 2:38 am

I tried using this rotate on a span class and it worked, but the text inside the span also rotate, while i wanted only the image to rotate. SO i used the rotate again on the text (180+180 = 360).

This worked fine, but the margin’s for the text got messed up.

Have a look at the green buttons here to see what i mean:

http://www.cc.gatech.edu/~tchakrav/JSexperiments/index.php

Dave November 1, 2011 at 9:14 pm

I always struggle to remember little things like this. Check out http://www.cssrotate.com for a CSS Rotation generator.

vyas November 10, 2011 at 3:13 pm

What if I want to rotate it by 30 or 45 degree?
Tried it with firefox and other browser, but can’t find a way for IE… because we can only apply 1,2,3 and 4 in the IE code… (even tried by 3.5… he he he)

ANY suggestions???

David November 17, 2011 at 7:00 am

I never quite understand why browsers do a prefixed version of the various CSS codes, really makes it difficult to keep up. I find that copy and paste rule generator websites for a variety of CSS3 operators are really useful – Cuts out the need to remember the specifics. In particular for CSS transform / rotation I quite like using http://www.cssrotate.com

Bongani Given Ndlovu Ngomani December 19, 2011 at 9:45 am

The IE doesn’t work for me. I don’t know why! I’ll try using different computer with different IE versions.

Is it possible to rotate the content/object using a function__ maybe a picture rotating if a certain click is made— and save the image/object on the database as it is rotated?

ShawnS May 13, 2012 at 8:55 pm

None of these variants seem to be working in latest version of Opera 11.64 build 1403

nikunj February 24, 2013 at 3:53 pm

i hav tried ur methode but it not working man what to do ha …….

ravi May 15, 2013 at 10:34 pm

thank you for the tip, it was very helpful. i was able to accomplish the task without using any external lib’s.

Comments on this entry are closed.

{ 2 trackbacks }

Previous post:

Next post: