Here is a bit of css with sample html to show you how to rotate text or an image using css. Works in FF 3.5, Chrome, Safari (most likely just 4, but have not tested in others), IE6-8 (read it supports 5.5). I got this from http://snook.ca.

CSS:

#book {
display: block;
float: left;
}
.title {
display: block;
-webkit-transform: rotate(-90deg); 
-moz-transform: rotate(-90deg);
filter: progid:DXImageTransform.Microsoft.
BasicImage(rotation="3");
position: absolute;
}
</style>

HTML:

<div id="book">
<span class="title">War of the Flowers</span>
</div>

Each browser needs its own little prefix for this (the filter is for IE).

Although I can’t think of a reason off the top of my head why I would use this, its still a neat little trick.

This entry was posted on Thursday, October 29th, 2009 at 9:16 pm and is filed under CSS, Web Development. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.