A Web Design Community curated by Chris Coyier

Code Snippets Gallery

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

8 Responses

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

Leave a Comment

Remember:
  • Be nice.
  • Wrap multiline code in <pre> and <code> tags and escape it first (turn <'s into &lt;'s).
  • You may use regular HTML stuff like <a href="">, <em>, and <strong>
* This website may or may not contain any actual CSS or Tricks.