jquery text rotation

Question

I've got a simple text inside a div, something like the following;

<div id="banner">
    <div>This is an example text</div>
</div>

I want the text inside the div to be rotated 20-30 degrees. I've already found this topic on stackoverflow about it and it gives me the desired result in Firefox and Chrome but not in IE7, IE8 and IE9. I also tried jquery rotate, but when using this it looks like the plugin is doing something with the div itself, making it disappear, instead of rotating the text inside the div. Is this even possible with javscript and/or css?

NOTE: Cufon is also being used.

Update after Codlers answer:

This is the current applied css after the answer of Codler. Works in FF and Chrome.

-ms-transform: rotate(-20deg);
-moz-transform: rotate(-20deg);
/*-moz-rotation-point: 0 0;*/
-webkit-transform: rotate(-20deg);
/*-webkit-rotation-point: 0 0;*/
-o-transform: rotate(-20deg);
/*-ms-writing-mode: tb-lr;
* html writing-mode: tb-lr;*/

UPDATE 2: IE7 and IE8 are rotating the text now, but in IE9 i'm getting a big black square behind my rotated text. What can be causing this? CSS is now as below;

-moz-transform: rotate(-20deg);
-o-transform: rotate(-20deg);
-webkit-transform: rotate(-20deg);
-ms-transform: rotate(-20deg);  
transform: rotate(-20deg);
background-color:transparent;

/*-ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=0.93969262, M12=0.34202014, M21=-0.34202014, M22=0.93969262,sizingMethod='auto expand')";*/
/*filter: progid:DXImageTransform.Microsoft.Matrix(M11=0.93969262, M12=0.34202014, M21=-0.34202014, M22=0.93969262,sizingMethod='auto expand');*/
filter: progid:DXImageTransform.Microsoft.Matrix(M11=0.93969262, M12=0.34202014, M21=-0.34202014, M22=0.93969262,sizingMethod='auto expand');
zoom: 1;
z-index:1;

position:absolute;

padding     : 45px 10px 15px 10px;

The Final working piece of code. Credits for this go toe Jeff and Codler.

HTML:

<div id="banner">
    <div>This is an example text</div>
</div>

Default CSS:

#banner > div
{       
    -moz-transform: rotate(-20deg);                 /*FF*/
    -o-transform: rotate(-20deg);                   /*Opera*/
    -webkit-transform: rotate(-20deg);              /*Safari, Chrome*/
    -ms-transform: rotate(-20deg) !important;       /*IE9*/
        transform: rotate(-20deg);                      /*CSS3 default*/
    background-color:transparent;

    zoom: 1;
    z-index:1; /*NEEDED FOR IE8*/

    width: 191px;

    position:absolute;

    padding     : 45px 10px 15px 10px;
}

CSS FOR IE 7 & 8 - Loaded conditionally:

#banner
{
    filter: progid:DXImageTransform.Microsoft.Matrix(M11=0.93969262, M12=0.34202014, M21=-0.34202014, M22=0.93969262,sizingMethod='auto expand') !important;
    padding-top:0px;
}

Try this tutorial. I think this will be helpful... :) http://stackoverflow.com/questions/6184589/jquery-text-rotation — Steven.Nguyen, Jan 02 '15 at 14:23

score 14 · Accepted Answer · answered May 31 '11 at 08:16

In standards-compliant browsers, you can use the CSS3 property transform, though it's probably a good idea to use vendor prefixes, e.g.:

-o-transform: rotate(5deg);
-khtml-transform: rotate(5deg);
-webkit-transform: rotate(5deg); 
-moz-transform: rotate(5deg);

In Internet Explorer 6 and 7, things get tricky. You can use IE's filter property to do rotation.

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

will rotate the element 90 degrees. You can also rotate 180 or 270 degrees using rotation=2 or rotation=3

Do you want to rotate something in IE to a different angle? Are you ready for the headache?

You can use IE's filter property again and specify matrix coordinates, and get something really ugly like this:

progid:DXImageTransform.Microsoft.Matrix(M11=0.99619470, M12=0.08715574, M21=-0.08715574, M22=0.99619470,sizingMethod='auto expand');

There are instructions on how to use the Matrix coordinates on this page, but frankly none of them make any sense. A better solution is to use this handy Matrix calculator that will generate the CSS you need when you specify the angle in degrees.

You can check out the CSS on my site to see an example, but I haven't checked it using IE in a while, so I can't make any promises...

Hmm, I'm on a Mac right now so I can't troubleshoot at the moment. My only thought is, do you need z-index: 1? You could try getting rid of that, or even making it -1. Otherwise, I'll check back tomorrow if it's still not solved. — Jeff, May 31 '11 at 08:50
@Jeff, tried without the z-index. But then rotation doesn't work in IE8 anymore. Would be great if you could help out tomorrow! — Rob, May 31 '11 at 08:57
@Rob Also, if you can get it working in IE9 and IE8 with -different- styles, you could always use a targeted IE css hack like — Jeff, May 31 '11 at 09:06
@Jeff, if I remove the IE filter matrix it works in ie9. So will try with ie conditional styles, good tip! — Rob, May 31 '11 at 09:09
@Jeff, fixed! Created an conditional style for IE7 and IE8. Question is updated with the working solution — Rob, May 31 '11 at 09:18

Codler · Answer 2 · 2011-05-31T08:10:28.297

6

It is possible to rotate with css3

transform: rotate(20deg);

Remember that some browser require vendor prefix.

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

Source http://css3please.com/

edited May 31 '11 at 08:10

answered May 31 '11 at 08:02

Codler

10,951
6
52
65

Isn't that the same as in one of the topics I already mentioned in my questions? – Rob May 31 '11 at 08:04
1

Use -ms-transform for IE9 and "filter matrix" for IE6-IE8, you can find more here http://css3please.com/ – Codler May 31 '11 at 08:08
@Codler, got it fixed. Question is updated with the working example. Thanks for all the help. – Rob May 31 '11 at 09:18

score 2 · Answer 3 · answered Feb 09 '12 at 16:09

2

It seems as if the black square in the background in IE9 happens when those nasty proprietary filters are also in the selector where you are doing css transforms.

answered Feb 09 '12 at 16:09

dontmentionthebackup

2,775
1
21
18

This really helped me, thanks! Adding the filters to the lt IE9 stylesheet solved my problem. – Nicolas Borda May 30 '12 at 08:14

score 1 · Answer 4 · edited May 23 '17 at 12:25

1

It's not really possible in IE. At best, IE can only rotate in multiples of 90 degrees, and even that's a pain (IIRC). However, this answer claims otherwise.

For modern browsers, use the transform, -webkit-transform, and -moz-transform, as suggested already.

You might be able to bodge it using VML (Vector Markup Language) in IE. I think it can do arbitrary rotations.

edited May 23 '17 at 12:25

Community

1
1

answered May 31 '11 at 08:11

Eric

95,302
53
242
374

score 0 · Answer 5 · edited May 23 '17 at 12:25

0

Use this tool to generate CSS that will work cross browser:

http://www.useragentman.com/IETransformsTranslator/index.html

It really does work.

edited May 23 '17 at 12:25

Community

1
1

answered May 31 '11 at 08:32

thirtydot

224,678
48
389
349

jquery text rotation

5 Answers5

Linked