CSS rotate text in div

• Tweet

• Tweet

Hi Guys,

Everyday we learn something new and this is those day that I learned something and would like to share. I never really had this situation or use case before that I had to rotate a text inside a DIV or in any other container.

So the requirement came up with the new WordPress plugin I am developing for myself. Let see how this is done.

First the proposed property is called transform and is available in webkit and Mozilla browser with their prop prefixes i.e. -webkit and -moz

Lets check out the CSS to anticlockwise rotate text by 90 degrees i.e.

.text-rotation {
      -webkit-transform: rotate(-90deg); 
      -moz-transform: rotate(-90deg);
       -ms-transform: rotate(-90deg);
        -o-transform: rotate(-90deg);
        transform: rotate(-90deg);
}

Now lets check the markup

<div>
        <div class="text-rotation" style="font-size:20px;width:200px;height:200px;text-align:center"><!-- I've add these extra inline styles to get myscreenshots, these are not required -->
            HELLO ROTATION
          </div>
</div>

Ok So when you try to load the above in FireFox or Chrome or Safari all works well but in IE it doesn’t work that well because as usual IE has no support for transform property. But IE has its own filter for this stuff to work. Here is what you can do.

You can do a check on IE and add IE filter to the style above. This is how its done

<!--[if IE]>
        <style>
             .text-rotation {
                    /*rotation=0 means Zero degrees, 1 is 90deg, 2 is 180 and 3 is 270 */
                    filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3); 
              }
           </style>
 <![endif]-->

The end result is shown below

I hope this helps

Advertisement

Further reading on this topic

http://www.thecssninja.com/css/real-text-rotation-with-css

http://css-tricks.com/date-display-with-sprites/

Cheers