Grow your CSS skills. Land your dream job.

Last updated on:

Text Rotation

.rotate {

/* Safari */
-webkit-transform: rotate(-90deg);

/* Firefox */
-moz-transform: rotate(-90deg);

/* IE */
-ms-transform: rotate(-90deg);

/* Opera */
-o-transform: rotate(-90deg);

/* Internet Explorer */
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);

}

The example above rotates text 90 degrees counterclockwise.

The rotation property of Internet Explorer’s BasicImage filter can accept one of four values: 0, 1, 2, or 3 which will rotate the element 0, 90, 180 or 270 degrees respectively.

Also see this blog post about sideways headers.

Reference URL

Comments

  1. Permalink to comment#

    Could i say rotate something in IE by say 5 or 10 degrees?

    • Permalink to comment#

      Yes, but you would have to use javascript in ie6.

      This thread has a lot of info on it.

      However, I use jQuery for this, as there is a very nice plugin.

    • Gijs Stegehuis

      In fact you don’t have to use javascript for this to work in IE, you could use IE’s matrix filter!

    • Permalink to comment#

      Opps, I meant to add my comment up here… but it’s way at the bottom. Essentially, I suggested using CSS3Please.

    • Tsanyo Tsanev

      Yes you can. To get 10 deg rotation you just use 10*1/90 which would be approx 0.11

    • mPhuong

      how to rotate 45deg?

    • I believe is not a big problem for smart browser you can use CSS3 rotate, but for retarded browser you have to use

      5 degree

      filter: progid:DXImageTransform.Microsoft.Matrix(M11=0.99, M12=-0.08, M21=0.08, M22=0.99, SizingMethod="auto expand");

      m11 = sin (5 * pi / 180)
      m12 = cos (5 * pi / 180)
      m21 = cos (5 * pi/ 180)
      m22 = sin (5 * pi / 180)

      for IE sample, you can check fiddle here

      http://jsfiddle.net/pv8sH/

  2. Tameshwar
    Permalink to comment#

    Great man, it will also work for Images, we can use for rounded corner images to rotate the one single image.

  3. Permalink to comment#

    Thanks, this is just what I needed.

  4. Gijs Stegehuis

    You did forget Opera: -o-transform:rotate(90deg);

  5. Permalink to comment#

    It’s nice !.thank you very much !

  6. Ilídio Martins
    Permalink to comment#

    “Transformie is a javascript plugin that comes in less than 5k that you embed into web pages and that brings you CSS Transforms by mapping the native IE Filter API to CSS transitions as proposed by Webkit.”

    http://transformie.com

  7. Permalink to comment#

    Hey Opera should be on that list too… cheers!

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

  8. Mahendran
    Permalink to comment#

    I DIDN’T GET IT..

  9. Permalink to comment#

    No way to rotate another angles rather than 90/180/270 in IE?

  10. yolande
    Permalink to comment#

    I have rotated the text and it is working with ie, but the text seem fuzzy and just doens’t look good. Is there a way to prevent that?

  11. One big problem with this is the filter attribute is very inefficient. Say, animating the margin of an element with a filter, or has child elements with a filter, is incredibly jerky on the best of machines.

    Ran into a problem with this recently and really need a faster way to rotate text for this project, perhaps cufon.

  12. Kenchappagoudra
    Permalink to comment#

    Hi Chris,
    Could you explain how it should done for google chrome? I have chrome installed in my machine. It is not working with the above code.

    Thanks.
    Kenchappagoudra

  13. ZoltAi
    Permalink to comment#

    @ SAM JARVIS
    your answer did the trick for me … great stuff mate :)))

  14. 123456789
    Permalink to comment#

    ngfnfggf

  15. My Den
    Permalink to comment#

    I try to use Text Rotation for my example page http://www.pcservices-au.com/accordion_effect.htm . The text can rotate perfecto but I have one problem the text keep wrap to another lines. I can’t find the solution. Anyone has any ideas I really appreciate. U can check the link and will see my problems.

  16. bob
    Permalink to comment#

    but is does not supports in Internet Explorer (All version)

  17. Permalink to comment#

    Its great that these CSS3 properties are finally making some headway, in terms of browser support, even IE’s catching up which is great!

    If like a lot of devs you find it hard to remember every little detail (e.g. all the daft prefixed versions for each browser) when it comes to the new CSS3 operators then it might be useful to use one of the CSS generators available on the net. For transform, I quite often check out http://www.cssrotate.com

  18. Permalink to comment#

    Chris, Your “filter: progid: …” destroys IE9 SP1 up-to-date
    symptom: (have not tested Apple … yet) win7-64, a few of many details:
    no prob previewing rotation from Xweb4 preview until open html file from explorer
    then rotated text (in our case one small word) is displayed as coded in css 10px “word”
    but css rotated tag is a big black box filling 80% of browser window
    reinstall IE and Xweb and problem tripped by explorer is not going away
    explorer permanently corrupts windows, preview, favs etc same gross corruption
    remove “filter: progid: …” and corruption gone, but initial non-corrupt display? residue?
    that requires a closer look — hope no issue for you, but this page is now famous – lol
    Symantec and I are both going to keyhole this one with the win-ie dev teams
    in about 6 hours, css-tricks.com/snippets/css/text-rotation /will advise /mark ~tx
    ps don’t suppose dev or research will offer a safe alt? ;o(

  19. Vjoanne
    Permalink to comment#

    I tried the code on my site, it doesn’t work in IE 9, when I view from my local it looks fine but when I upload it online, it doesn’t display as what I see in local.

    Do you know what’s the problem ?

    • late comment but try adding this in front of “filter: …”
      [if lte IE 8] so that your css line looks like:

      [if lte IE 8] filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);

  20. Unknow
    Permalink to comment#

    nice!! Thank you :)

  21. Permalink to comment#

    Is there a way to get the angle by which the element is rotated? Would prefer a way using jquery.
    Example:
    For the above code, I would like to do something like:

     var angle = $(".rotate").getRotateAngle();
    console.log(angle); // Should print -90
    
  22. Permalink to comment#

    I think the easiest way to figure out the css for rotated text is to use CSS3Please… it even provides the IE matrix filter so you don’t have to calculate it yourself. Here’s an example:

    .box_rotate {
      -webkit-transform: rotate(7.5deg);  /* Saf3.1+, Chrome */
         -moz-transform: rotate(7.5deg);  /* FF3.5+ */
          -ms-transform: rotate(7.5deg);  /* IE9 */
           -o-transform: rotate(7.5deg);  /* Opera 10.5 */
              transform: rotate(7.5deg);
                 filter: progid:DXImageTransform.Microsoft.Matrix(/* IE6–IE9 */
                         M11=0.9914448613738104, M12=-0.13052619222005157,M21=0.13052619222005157, M22=0.9914448613738104, sizingMethod='auto expand');
                   zoom: 1;
    }
  23. madam
    Permalink to comment#

    Hello to all,
    I make ebooks and I tried a rotation of a bloc with background and text inside (iBooks takes some css3). It works fine except (it’s a shame for a book !) that the text shakes, just like if it was follwing a wave… Can someone help ?

    Here is my css code:
    {
    .encadregris_turn{
    font-family: “HelveticaNeue-Italic”, sans-serif;
    font-size: 0.9em;
    padding: 0.8em;
    color: #624a30;
    float: right;
    width: 55%;
    -webkit-transform: rotate(2deg);
    -moz-transform: rotate(2deg);
    -epub-transform: rotate(2deg);
    margin-top: 1.2em;
    }

  24. Koyae
    Permalink to comment#

    What’s the difference between “IE” and “Internet Explorer” in this example?

    If I can omit one, I’d really like to, seeing as how IE6 is now dead.

  25. Any idea how to insert this in single HTML tag?

  26. Filip Bech-Larsen
    Permalink to comment#

    It seems using both the -ms prefix and the filter-attribute will double the effect (rotating the double amont) in IE9 (for me at least). Leaving out the -ms prefixed line fixes this for me, and the filter-thing works fine in IE9 also.

  27. Robert
    Permalink to comment#

    This is a very good example. Thanks
    I’ve noticed that with IE in print mode the text is not rendered as rotated.
    Is there any fix for this?

  28. Permalink to comment#

    Problem I’m having is with the IE rotate. This rotates the text but “Microsoft.BasicImage”converts it to and image, breaking the link.

  29. This is an easy and useful tool to convert CSS3′s transform
    to IE filters: http://www.useragentman.com/IETransformsTranslator/

  30. Aditi
    Permalink to comment#

    The code works very well. But when the text is long, without spaces, it goes outside the border of the cell!! How to prevent this? How to resize the cells according to the content?

  31. Arthur Dent
    Permalink to comment#

    Anyone knows if it’s possible to rotate (180 deg) in epub, working with Adobe Digital Editions? Thanks.

  32. nick
    Permalink to comment#

    thankyou for ur sharing^^

  33. jennifer

    Can I rotate just one character? I am using an arrow pointed straight up in text (↑), but would like to show it angled at 45-degrees, if it’s possible. Thanks so much for any help!
    :)

    • Permalink to comment#

      Just throw a span around the character you want to rotate and add the .rotate class to the span. If you can’t add the span because you don’t have access to the html for some reason you could use something like Dave Rupert’s Lettering.js

  34. Permalink to comment#

    Worked great thanks!

  35. Permalink to comment#

    Great article! It looks like the IE transform is no longer needed for newer versions of IE and the -o prefix may not be needed for newer versions of Opera as well.

  36. Harish
    Permalink to comment#

    please suggest for 45 degree rotation for IE -7,8

  37. Permalink to comment#

    PLEASE stop marking some things “IE compatible” and other as “Internet Explorer compatible” in order to count them as 2 different things.
    Ugh.

  38. Nate
    Permalink to comment#

    Can IE please just die already!? or work entirely of webkit? Seriously, I don’t even want to bother coding for all the bugs in IE.

  39. Derek
    Permalink to comment#

    Does anyone know of a fix that allows filters to render when printing to PDF? IE renders the rotation just fine, but if i use IE8 or IE7, the filter property will not render correctly in the PDF print. Thanks

  40. Caroline

    Thanks! But for some reason in IE9 the text has rotated 180 degrees and has a black background:

    http://monosnap.com/image/GNYC0ztxiHW1y5LzfohBgowZUA5lGu

    In IE8 and other browsers looks fine:

    http://monosnap.com/image/cgV0mFulOBstulAvjtoBXvAeNJI8Ry

    Any tips?

  41. lior
    Permalink to comment#

    thanks
    will this work on images also ?

Leave a Comment

Current day month ye@r *

*May or may not contain any actual "CSS" or "Tricks".