jquery text rotation

Question

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

    
This is an example text



        

Answer 1

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...

Answer 2

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.

Answer 3

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

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

It really does work.

Answer 4

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/

Answer 5

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.