Snowfalls

Posts Tagged ‘text

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 🙂

Tags: , , ,