Code Snippet

Home » Code Snippets » CSS » Text Rotation

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

Subscribe to The Thread

  1. Sean Hood

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

    Reply ↓
    • Kirill

      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!

    • Mottie

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

  2. Tameshwar

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

    Reply ↓
    • sushant

      css rotation does not work in ie 7 or ie 7-

  3. Aric

    Thanks, this is just what I needed.

    Reply ↓
  4. Gijs Stegehuis

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

    Reply ↓
  5. Sumith

    It’s nice !.thank you very much !

    Reply ↓
  6. Ilídio Martins

    “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

    Reply ↓
  7. Shea Dawson

    Hey Opera should be on that list too… cheers!

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

    Reply ↓
  8. Mahendran

    I DIDN’T GET IT..

    Reply ↓
  9. shu

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

    Reply ↓
  10. yolande

    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?

    Reply ↓
  11. Sam Jarvis

    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.

    Reply ↓
  12. Kenchappagoudra

    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

    Reply ↓
  13. ZoltAi

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

    Reply ↓
  14. 123456789

    ngfnfggf

    Reply ↓
  15. My Den

    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.

    Reply ↓
  16. bob

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

    Reply ↓
  17. David

    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

    Reply ↓
  18. Mark

    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(

    Reply ↓
  19. Vjoanne

    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 ?

    Reply ↓
  20. Unknow

    nice!! Thank you :)

    Reply ↓
  21. aditya

    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
    Reply ↓
  22. Mottie

    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;
}
    Reply ↓
    • Param

      It is not working when i tried it for IE7 &8, any help?

  23. madam

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

    Reply ↓
  24. Koyae

    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.

    Reply ↓
  25. kreiven

    Any idea how to insert this in single HTML tag?

    Reply ↓

Speak, my friend

At this moment, you have an awesome opportunity* to be the person your mother always wanted you to be: kind, helpful, and smart. Do that, and we'll give you a big ol' gold star for the day (literally).

Posting tips:
  • You can use basic HTML
  • When posting code, please turn all
    < characters into &lt;
  • If the code is multi-line, use
    <pre><code></code></pre>
Thank you,
~ The Management ~