A Web Design Community curated by Chris Coyier

A little dab'll do ya

Code Snippets

Code Snippets > CSS > Text Rotation Submit one!

Text Rotation

.rotate {

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

/* Firefox */
-moz-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 degress respectively.

Reference URL

Subscribe to The Thread

  1. Sean Hood says:

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

  2. Tameshwar says:

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

  3. Aric says:

    Thanks, this is just what I needed.

  4. Gijs Stegehuis says:

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

  5. Sumith says:

    It’s nice !.thank you very much !

  6. Ilídio Martins says:

    “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

It's Your Turn

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