Posted By

Winkyboy on 07/29/09

Tagged

style
text

Versions (?)

Last Edited at 07/29/09 09:41am

Statistics

Viewed 827 times

Favorited by 0 user(s)

Related snippets

Text Rotation with CSS

/ Published in: CSS

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

Expand | Embed | Plain Text

Copy this code and paste it in your HTML

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