Last updated on:

# Text Rotation

``````.rotate {

/* Safari */
-webkit-transform: rotate(-90deg);

/* Firefox */
-moz-transform: rotate(-90deg);

/* IE */
-ms-transform: rotate(-90deg);

/* Opera */
-o-transform: rotate(-90deg);

/* Internet Explorer */
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);

}``````

The example above rotates text 90 degrees counterclockwise.

The rotation property of Internet Explorer’s BasicImage filter can accept one of four values: 0, 1, 2, or 3 which will rotate the element 0, 90, 180 or 270 degrees respectively.

1. Sean Hood

Could i say rotate something in IE by say 5 or 10 degrees?

• Kirill

Yes, but you would have to use javascript in ie6.

This thread has a lot of info on it.

However, I use jQuery for this, as there is a very nice plugin.

• Gijs Stegehuis

In fact you don’t have to use javascript for this to work in IE, you could use IE’s matrix filter!

• Mottie

Opps, I meant to add my comment up here… but it’s way at the bottom. Essentially, I suggested using CSS3Please.

• Tsanyo Tsanev

Yes you can. To get 10 deg rotation you just use 10*1/90 which would be approx 0.11

• mPhuong

how to rotate 45deg?

• Ryan Hidajat

I believe is not a big problem for smart browser you can use CSS3 rotate, but for retarded browser you have to use

5 degree

```filter: progid:DXImageTransform.Microsoft.Matrix(M11=0.99, M12=-0.08, M21=0.08, M22=0.99, SizingMethod="auto expand"); ```

m11 = sin (5 * pi / 180)
m12 = cos (5 * pi / 180)
m21 = cos (5 * pi/ 180)
m22 = sin (5 * pi / 180)

for IE sample, you can check fiddle here
http://jsfiddle.net/pv8sH/

2. Tameshwar

Great man, it will also work for Images, we can use for rounded corner images to rotate the one single image.

3. Aric

Thanks, this is just what I needed.

4. Gijs Stegehuis

You did forget Opera: -o-transform:rotate(90deg);

5. Sumith

It’s nice !.thank you very much !

6. Ilídio Martins

“Transformie is a javascript plugin that comes in less than 5k that you embed into web pages and that brings you CSS Transforms by mapping the native IE Filter API to CSS transitions as proposed by Webkit.”

http://transformie.com

7. Shea Dawson

Hey Opera should be on that list too… cheers!

-o-transform: rotate(-90deg);

8. Mahendran

I DIDN’T GET IT..

9. shu

No way to rotate another angles rather than 90/180/270 in IE?

10. yolande

I have rotated the text and it is working with ie, but the text seem fuzzy and just doens’t look good. Is there a way to prevent that?

11. Sam Jarvis

One big problem with this is the filter attribute is very inefficient. Say, animating the margin of an element with a filter, or has child elements with a filter, is incredibly jerky on the best of machines.

Ran into a problem with this recently and really need a faster way to rotate text for this project, perhaps cufon.

12. Kenchappagoudra

Hi Chris,
Could you explain how it should done for google chrome? I have chrome installed in my machine. It is not working with the above code.

Thanks.
Kenchappagoudra

13. ZoltAi

@ SAM JARVIS
your answer did the trick for me … great stuff mate :)))

14. 123456789

ngfnfggf

15. My Den

I try to use Text Rotation for my example page http://www.pcservices-au.com/accordion_effect.htm . The text can rotate perfecto but I have one problem the text keep wrap to another lines. I can’t find the solution. Anyone has any ideas I really appreciate. U can check the link and will see my problems.

16. bob

but is does not supports in Internet Explorer (All version)

17. David

Its great that these CSS3 properties are finally making some headway, in terms of browser support, even IE’s catching up which is great!

If like a lot of devs you find it hard to remember every little detail (e.g. all the daft prefixed versions for each browser) when it comes to the new CSS3 operators then it might be useful to use one of the CSS generators available on the net. For transform, I quite often check out http://www.cssrotate.com

18. Mark

Chris, Your “filter: progid: …” destroys IE9 SP1 up-to-date
symptom: (have not tested Apple … yet) win7-64, a few of many details:
no prob previewing rotation from Xweb4 preview until open html file from explorer
then rotated text (in our case one small word) is displayed as coded in css 10px “word”
but css rotated tag is a big black box filling 80% of browser window
reinstall IE and Xweb and problem tripped by explorer is not going away
explorer permanently corrupts windows, preview, favs etc same gross corruption
remove “filter: progid: …” and corruption gone, but initial non-corrupt display? residue?
that requires a closer look — hope no issue for you, but this page is now famous – lol
Symantec and I are both going to keyhole this one with the win-ie dev teams
ps don’t suppose dev or research will offer a safe alt? ;o(

19. Vjoanne

I tried the code on my site, it doesn’t work in IE 9, when I view from my local it looks fine but when I upload it online, it doesn’t display as what I see in local.

Do you know what’s the problem ?

• Keith B

late comment but try adding this in front of “filter: …”
[if lte IE 8] so that your css line looks like:

[if lte IE 8] filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);

20. Unknow

nice!! Thank you :)

Is there a way to get the angle by which the element is rotated? Would prefer a way using jquery.
Example:
For the above code, I would like to do something like:

``` var angle = \$(".rotate").getRotateAngle();
console.log(angle); // Should print -90
```
22. Mottie

I think the easiest way to figure out the css for rotated text is to use CSS3Please… it even provides the IE matrix filter so you don’t have to calculate it yourself. Here’s an example:

``````.box_rotate {
-webkit-transform: rotate(7.5deg);  /* Saf3.1+, Chrome */
-moz-transform: rotate(7.5deg);  /* FF3.5+ */
-ms-transform: rotate(7.5deg);  /* IE9 */
-o-transform: rotate(7.5deg);  /* Opera 10.5 */
transform: rotate(7.5deg);
filter: progid:DXImageTransform.Microsoft.Matrix(/* IE6–IE9 */
M11=0.9914448613738104, M12=-0.13052619222005157,M21=0.13052619222005157, M22=0.9914448613738104, sizingMethod='auto expand');
zoom: 1;
}``````

Hello to all,
I make ebooks and I tried a rotation of a bloc with background and text inside (iBooks takes some css3). It works fine except (it’s a shame for a book !) that the text shakes, just like if it was follwing a wave… Can someone help ?

Here is my css code:
{
font-family: “HelveticaNeue-Italic”, sans-serif;
font-size: 0.9em;
color: #624a30;
float: right;
width: 55%;
-webkit-transform: rotate(2deg);
-moz-transform: rotate(2deg);
-epub-transform: rotate(2deg);
margin-top: 1.2em;
}

24. Koyae

What’s the difference between “IE” and “Internet Explorer” in this example?

If I can omit one, I’d really like to, seeing as how IE6 is now dead.

25. kreiven

Any idea how to insert this in single HTML tag?

26. Filip Bech-Larsen

It seems using both the -ms prefix and the filter-attribute will double the effect (rotating the double amont) in IE9 (for me at least). Leaving out the -ms prefixed line fixes this for me, and the filter-thing works fine in IE9 also.

27. Robert

This is a very good example. Thanks
I’ve noticed that with IE in print mode the text is not rendered as rotated.
Is there any fix for this?

28. Malenky

Problem I’m having is with the IE rotate. This rotates the text but “Microsoft.BasicImage”converts it to and image, breaking the link.

29. Blaise Kal

This is an easy and useful tool to convert CSS3’s transform
to IE filters: http://www.useragentman.com/IETransformsTranslator/

The code works very well. But when the text is long, without spaces, it goes outside the border of the cell!! How to prevent this? How to resize the cells according to the content?

31. Arthur Dent

Anyone knows if it’s possible to rotate (180 deg) in epub, working with Adobe Digital Editions? Thanks.

32. nick

thankyou for ur sharing^^

33. jennifer

Can I rotate just one character? I am using an arrow pointed straight up in text (↑), but would like to show it angled at 45-degrees, if it’s possible. Thanks so much for any help!
:)

• AJ

Just throw a span around the character you want to rotate and add the .rotate class to the span. If you can’t add the span because you don’t have access to the html for some reason you could use something like Dave Rupert’s Lettering.js

34. RobjH

Worked great thanks!

35. Matt Smith

Great article! It looks like the IE transform is no longer needed for newer versions of IE and the -o prefix may not be needed for newer versions of Opera as well.

36. Harish

please suggest for 45 degree rotation for IE -7,8

37. Patty

PLEASE stop marking some things “IE compatible” and other as “Internet Explorer compatible” in order to count them as 2 different things.
Ugh.

38. Nate

Can IE please just die already!? or work entirely of webkit? Seriously, I don’t even want to bother coding for all the bugs in IE.

39. Derek

Does anyone know of a fix that allows filters to render when printing to PDF? IE renders the rotation just fine, but if i use IE8 or IE7, the filter property will not render correctly in the PDF print. Thanks

40. Caroline

Thanks! But for some reason in IE9 the text has rotated 180 degrees and has a black background:
http://monosnap.com/image/GNYC0ztxiHW1y5LzfohBgowZUA5lGu

In IE8 and other browsers looks fine:
http://monosnap.com/image/cgV0mFulOBstulAvjtoBXvAeNJI8Ry

Any tips?

41. lior

thanks
will this work on images also ?

42. Farhan Islam

Can you confirm the compatibility? i.e. since which version these all rotation css supports/ supported.

I believe the post is quite outdated and is for earlier release of transform in css3.

43. Prabhu