Advanced Search

Return to Snippet

Revision: 16220
at July 29, 2009 09:41 by Winkyboy
Initial Code 
//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);
Initial URL 
http://snook.ca/archives/html_and_css/css-text-rotation
Initial Description 
Fairly simple, cross-browser way to rotate text using only CSS.
Initial Title 
Text Rotation with CSS
Initial Tags 
style, text
Initial Language 
CSS