Posted By

Winkyboy on 07/29/09


Tagged

style rotate text stylesheet


Versions (?)

Who likes this?

1 person have marked this snippet as a favorite

oldmeaty


Text Rotation with CSS


 / Published in: CSS
 

URL: http://snook.ca/archives/html_and_css/css-text-rotation

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.
  2.  
  3. -webkit-transform: rotate(-90deg);
  4. -moz-transform: rotate(-90deg);
  5.  
  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.
  7.  
  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.
  9.  
  10. filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);

Report this snippet  

You need to login to post a comment.