在 IE 中将文本旋转 330 度

Question

is it possible to rotate text in IE

-moz-transform: rotate(330deg);  /* FF3.5+ */
    -o-transform: rotate(330deg);  /* Opera 10.5 */
    -webkit-transform: rotate(330deg);  /* Saf3.1+, Chrome */
    filter:  progid:DXImageTransform.Microsoft.BasicImage(rotation=330deg);  /* IE6,IE7 */
    -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=330deg)"; /* IE8 */

lines written for IE are not working.

Can any one help.

EDIT. I want to rotate text crossed

Answer 1

As far as I am aware, rotation in IE is only possible in 90 degree intervals.

Check docs here: http://msdn.microsoft.com/en-us/library/ms532918%28v=vs.85%29.aspx

Answer 2

Have you already tried in this way:

<div id="rotation">Try this rotation</div>​

#rotation
{
  filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=..);
  -webkit-transform: rotate(330deg); 
  -moz-transform: rotate(330deg);    
  width:100px;
}​

like in this fiddle

Answer 3

Try this new example..

-ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=0.8660253882408142, M12=0.5, M21=-0.5, M22=0.8660253882408142,sizingMethod='auto expand')"; /* IE6-8 */

This has working

if you want more rotation angle means visit http://samples.msdn.microsoft.com/workshop/samples/author/dhtml/filters/matrix.htm

Answer 4

As it was already pointed out, the solution you want depends on the targeted ie version.

You should use all the transforms with different vendor prefixes

-vendor-transform : rotate(330deg);

and for ie versions that do not support css rotation, you can convert the rotation into a filter matrix and apply it to the element.
Here's a site that automatically converts the css3 transform to a filter matrix :

 /* IE8+ - must be on one line, unfortunately */ 
 -ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=0.8660254037844387, M12=0.49999999999999994, M21=-0.49999999999999994, M22=0.8660254037844387, SizingMethod='auto expand')";

/* IE6 and 7 */ 
filter: progid:DXImageTransform.Microsoft.Matrix(
        M11=0.8660254037844387,
        M12=0.49999999999999994,
        M21=-0.49999999999999994,
        M22=0.8660254037844387,
        SizingMethod='auto expand');

The only downside is that in order to make the transform-origin the center of the element, oyu must provide the width and height of that element.