• Text Rotation with CSS

  Date: Jun 29, 2010  |  Categories: Css  |  Written By: Mike Ballan  

Today I thought I would share the secret of Text Rotation with CSS, and yes it works with IE too..!

Now all the code you need to create the above text rotation effect is:

<div class="example-text">
    <span class="example-rotate">CSS</span> <span class="example-normal">Text<br />Rotation</span>
</div>

And the Css code:

.example-text {
    background-color:#333;
    color:#FFF;
    float:left;
    position:relative;
    padding:3px 5px 3px 30px;
    margin:0;
} 

.example-text .example-normal{
    text-transform:uppercase;
    font-size:20px;
}

.example-text .example-rotate{
    font-size:20px;
    display:block;
    position:absolute;
    left:-5px;
    top:15px;
    -webkit-transform: rotate(-90deg);
    -moz-transform: rotate(-90deg);
}

Also to make IE behave you will need to add in this code:

<!--[if IE]>
<style>
    .example-text .example-rotate {
        filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
        left:-15px;
        top:5px;
    }
</style>
<![endif]-->

And that’s it, I hope this helps and I’m sure there is a whole lot more you could do with this code, and if so drop me a email or leave a comment and ill check it out..!