Text Rotation with CSS


/ Published in: CSS
Save to your folder(s)

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


Copy this code and paste it in your HTML
  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);

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

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.