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