Text Rotation with CSS3

I’m working on a new design for Themes by bavotasan.com and I have been contemplating a few different approaches for some new buttons. This one fell by the wayside but I still think it’s kind of a cool idea. I wanted to use the CSS3 rotate style to have text going straight up. It’s pretty simple to do and looks awesome.

This is the HTML markup:

<div class="rotate-button">
   <div class="top">Basic Themes</div>
   <div class="turned">are</div>
   <div class="bottom">FREE</div>
</div>

The CSS3 rotate style looks like this:

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

The effects works in Firefox, Safari and Chrome browsers. You can also add a filter to make it work in IE but it probably won’t look exactly how you wanted it to.

The IE filter:

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