PSD to HTML conversion PSD to HTML conversion PSD2HTML.com with over 300 professionals takes the designs to HTML and beyond

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. Could i say rotate something in IE by say 5 or 10 degrees?

    • 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!

  2. Tameshwar

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

    • sushant

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

  3. Thanks, this is just what I needed.

  4. Gijs Stegehuis

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

  5. It’s nice !.thank you very much !

  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

  7. Hey Opera should be on that list too… cheers!

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

  8. Mahendran

    I DIDN’T GET IT..

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

  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?

  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

    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

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

  14. 123456789

    ngfnfggf

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 ~