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 comments

  1. Andre

    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

      Thanks for the tip, Andre!

  2. harik4ever

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

    • Yang Yang

      Changing the degree values?

  3. webdev

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

  4. wee

    will it pass css validation?

  5. Tanuj

    thanks for give this useful information

  6. Jordan

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

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

  8. Brian

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

    • Yang Yang

      Validation is for suckers.

  9. NeerAJ

    I Really Thanks for this Wabsite for my Usefull Informatuion.

  10. Dave

    After using these properties, image quality goes off.

    Don’t know what to do

  11. Dave

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

    Thanks in advance

  12. Jim

    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.

  13. Martin

    Does this work with ie 6 and 7

  14. angelz to Martin

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

  15. vipul

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

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

  16. sk

    Thanks it is really helpful stuff!!

  17. Marco

    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…

  18. John

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

  19. John

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

  20. John

    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.

  21. John

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

  22. Theraisa K

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

  23. Lou

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

  24. Roland Hentschel

    Hi!

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

    ( -: roland :- )

  25. juan

    blog01

  26. Tom

    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.

  27. Tarun

    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

  28. Pingback: Bild drehen und Verlauf erstellen - XHTMLforum

  29. Dave

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

  30. vyas

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

  31. David

    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

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

  33. ShawnS

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

  34. nikunj

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

  35. ravi

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