1

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

3
  • Try this :.. filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3); Dec 3, 2012 at 11:32
  • @suresh.g how do you expect (rotation=3) to rotate 330 degree? Dec 3, 2012 at 11:34
  • We unable to set this, but we can use rotation=1 or 2 or 3. It will works like 90,180,270.. Dec 3, 2012 at 11:44

4 Answers 4

2

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

0

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.

0

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

2
  • His question states he needs an answer for IE; those provided by you are for webkit (Chrome / Safari) and moz (Firefox).
    – MarcoK
    Dec 3, 2012 at 11:29
  • What supposed to replace the two dots in rotation=.. to make it rotate 330 degree? Dec 3, 2012 at 11:44
0

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

6
  • OP wants to rotate 330 degree, not 270 Dec 3, 2012 at 11:42
  • -ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=0.8660253882408142, M12=0.5, M21=-0.5, M22=0.8660253882408142,sizingMethod='auto expand')"; /* IE6-8 */
    – Moorthy GK
    Dec 3, 2012 at 11:53
  • why you put me down rating?
    – Moorthy GK
    Dec 3, 2012 at 12:20
  • Because the question is "how to rotate 330 degree in IE" and you gave the answer "(rotation=3)" - I notice you have changed your answer and will remove my downvote :o) Dec 3, 2012 at 12:31
  • is this answer useful for you?
    – Moorthy GK
    Dec 3, 2012 at 12:40

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.