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.

Comments

  1. User Avatar
    Sean Hood
    Permalink to comment#

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

    • User Avatar
      Kirill
      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.

    • User Avatar
      Gijs Stegehuis

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

    • User Avatar
      Mottie
      Permalink to comment#

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

    • User Avatar
      Tsanyo Tsanev

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

    • User Avatar
      mPhuong

      how to rotate 45deg?

    • User Avatar
      Ryan Hidajat
      Permalink to comment#

      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/

    • User Avatar
      Chiquito
      Permalink to comment#

      Hello, Sean Hood, to answer your question, no. You can’t. However, you can rotate something in IE by, say, 7 degrees. That is MUCH more reasonable.

  2. User Avatar
    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. User Avatar
    Aric
    Permalink to comment#

    Thanks, this is just what I needed.

  4. User Avatar
    Gijs Stegehuis

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

  5. User Avatar
    Sumith
    Permalink to comment#

    It’s nice !.thank you very much !

  6. User Avatar
    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. User Avatar
    Shea Dawson
    Permalink to comment#

    Hey Opera should be on that list too… cheers!

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

  8. User Avatar
    Mahendran
    Permalink to comment#

    I DIDN’T GET IT..

  9. User Avatar
    shu
    Permalink to comment#

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

  10. User Avatar
    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. User Avatar
    Sam Jarvis
    Permalink to comment#

    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. User Avatar
    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. User Avatar
    ZoltAi
    Permalink to comment#

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

  14. User Avatar
    123456789
    Permalink to comment#

    ngfnfggf

  15. User Avatar
    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. User Avatar
    bob
    Permalink to comment#

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

  17. User Avatar
    David
    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. User Avatar
    Mark
    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. User Avatar
    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 ?

    • User Avatar
      Keith B

      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. User Avatar
    Unknow
    Permalink to comment#

    nice!! Thank you :)

  21. User Avatar
    aditya
    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. User Avatar
    Mottie
    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. User Avatar
    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. User Avatar
    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. User Avatar
    kreiven
    Permalink to comment#

    Any idea how to insert this in single HTML tag?

  26. User Avatar
    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. User Avatar
    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. User Avatar
    Malenky
    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. User Avatar
    Blaise Kal
    Permalink to comment#

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

  30. User Avatar
    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. User Avatar
    Arthur Dent
    Permalink to comment#

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

  32. User Avatar
    nick
    Permalink to comment#

    thankyou for ur sharing^^

  33. User Avatar
    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!
    :)

    • User Avatar
      AJ
      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. User Avatar
    RobjH
    Permalink to comment#

    Worked great thanks!

  35. User Avatar
    Matt Smith
    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. User Avatar
    Harish
    Permalink to comment#

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

  37. User Avatar
    Patty
    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. User Avatar
    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. User Avatar
    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. User Avatar
    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. User Avatar
    lior
    Permalink to comment#

    thanks
    will this work on images also ?

  42. User Avatar
    Farhan Islam
    Permalink to comment#

    Can you confirm the compatibility? i.e. since which version these all rotation css supports/ supported.

    I believe the post is quite outdated and is for earlier release of transform in css3.

  43. User Avatar
    Prabhu
    Permalink to comment#

    Any idea about the Adobe digital edition and IPAD to support css for rotated text.

  44. User Avatar
    Rajkumar Das

    The rotation is not working in IE8. Can you please let me know what is the issue ?

Submit a Comment

Posting Code

You may write comments in Markdown. This makes code easy to post, as you can write inline code like `<div>this</div>` or multiline blocks of code in triple backtick fences (```) with double new lines before and after.

Code of Conduct

Absolutely anyone is welcome to submit a comment here. But not all comments will be posted. Think of it like writing a letter to the editor. All submitted comments will be read, but not all published. Published comments will be on-topic, helpful, and further the discussion or debate.

Want to tell us something privately?

Feel free to use our contact form. That's a great place to let us know about typos or anything off-topic.

icon-anchoricon-closeicon-emailicon-linkicon-logo-staricon-menuicon-nav-guideicon-searchicon-staricon-tag