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

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.

By Yang Yang

Hello, I'm Yang. I build online businesses that please people. Want to join in and post some useful articles on Shoot me a message.

40 replies on “CSS: Rotate Text / Image Elements by 90, 180 or 270 Degrees”

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

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

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

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

Thanks in advance

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.

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

/* 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);

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

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…

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

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

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

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.

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

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


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

( -: roland :- )

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.

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

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

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?

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

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

Comments are closed.