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.

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

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

  2. Pingback: CSS Exercise, Part Two (Due May 4). « GD 220 / Spring 2010

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

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

    Thanks in advance

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

  6. angelz to Martin

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

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

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

  9. 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);
    }

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

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

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

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

  14. Roland Hentschel

    Hi!

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

    ( -: roland :- )

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

  16. Pingback: Bild drehen und Verlauf erstellen - XHTMLforum

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

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

  19. Bongani Given Ndlovu Ngomani

    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?

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

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

Scroll to Top