Hello, please sign in or register
You are here: Home

Rotating elements with CSS

Today i was ""reading someone else's article"" which pointed me to the workings of rotation in CSS. Which seems to be supported by a good spread of browsers.
IE5.5+, FF3.5, Webkit

A smidgin of CSS
.example-date .year{
-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
}


And a bit of mark-up..
<div class="example-date">
<span class="day">31</span>
<span class="month">July</span>
<span class="year">2009</span>
</div>


31 July 2009

And voila. I introduce...


I'll do another example if i remember... of can think of a place where this is a good idea.

If you dont have a compatible browser... it should look like this

Comments

Title*
Comment

Prove you are not a robot

To prove you are not a robot, please type in the six character code you see in the picture below
Security confirmation codeI can't see this!
Contact
Name*
Email never shown*
Home Page

Author

Andrew Dodson
Since:Feb 2007

Comment | flag

Categories

Bookmark and Share