Snowfalls

How to Create a Text Rotation Using CSS?

Posted on: October 12, 2010

Sometimes a normal-horizontal text isn’t enough, we need the text rotate into some angle we want them to be.

To do this we could add a few lines of codes in our text css-selector. For example:

In your HTML:

<div class=”container”>

<span>It Works</span>

</div>

Inside the css file you should add:

.container span{

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

}

But unfortunately this won’t work in IE.. To have it works you should add more lines of codes like I shown below:

position: absolute;
filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=1);

The absolute position is very important here because if you put another position options like relative or static, the filter wouldn’t work.. And for rotation value, the number means:

0 = not rotated

1 = 90 degrees

2 = 180 degrees

3 = 270 degrees

So our CSS selector become:

.container span{

-webkit-transform: rotate(-12deg);
-moz-transform: rotate(-12deg);
transform: rotate(-12deg);
position: absolute;
filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=1);

}

Until I write this post,

I haven’t found a method to make text-rotation in IE rotate with custom degrees,

so if you have some ways to do it, I would appreciate a lot  if you share it by commenting below my post 🙂

Advertisements
Tags: , , ,

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: