Rotate text with CSS

Written on Aug 03, 2009 // Net, Open Source.

Just a quick example on how to use CSS new properties to rotate texts without Javascript. I love those progresses, but still hate the needing of specify three different properties for three different kinds of browser.

DEMO:

Hello
world

DEMO IMG:

This is how you should see the above code if your browser supports it.
demo css Rotate text with CSS

CODE:

<style> #ctn { height:30px; margin:5px; } #little-caption { float:left; font-size:10px; -webkit-transform: rotate(-90deg); -moz-transform: rotate(-90deg); filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3); } #big-toe { float:left; font-size:30px; }</style>
<div id="ctn">     
    <div id="big-toe">
        Hello
    </div>
    <div id="little-caption">
        world
</div>
</div>

  • Guest
    Its not working :(
  • What browser are you testing it on?
  • malappuraminfo
    Good Suggestion, Thanks for your code snippet, Browser compatibility is more attractive.
blog comments powered by Disqus