Posted By

Winkyboy on 07/29/09


style rotate text stylesheet

Versions (?)

Who likes this?

1 person have marked this snippet as a favorite


Text Rotation with CSS

 / Published in: CSS


Fairly simple, cross-browser way to rotate text using only CSS.

  1. //For Webkit and Firefox (as of 3.5), you can take advantage of the proposed transform property to handle the rotation. Each browser requires its property prefix for now.
  3. -webkit-transform: rotate(-90deg);
  4. -moz-transform: rotate(-90deg);
  6. //In order to perform a transformation, the element has to be set to display:block. In this case, just add the declaration to the span that you want to rotate.
  8. //When it comes to effects in Internet Explorer, there is a surprising amount of power (and untapped at that, I'd say) in using filters. Although misleading, there is a filter called BasicImage that offers up the ability to rotate any element that has layout.
  10. filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);

Report this snippet  

You need to login to post a comment.