Thursday, July 29, 2010

Text Rotation with CSS

The Sample HTML Code

span class="day">31
span class="month">July
span class="year">2009

The CSS Code for the class "month"
n 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.

-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);

filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);

The rotation property of the BasicImage filter can accept one of four values: 0, 1, 2, or 3 which will rotate the element 0, 90, 180 or 270 degress respectively

Readmore on "Working with CSS transitions" fountd on
http://dev.opera.com/articles/view/css3-transitions-and-2d-transforms/
and the the source blog for this post
http://snook.ca/archives/html_and_css/css-text-rotation

Nishan Shanaka Korala Gamage
Colombo, Sri Lanka
Author: Eye Think

No comments:

Post a Comment