CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Poonam Bhatt
Poonam Bhatt

Reputation: 10302

rotate text 330 degree in IE

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

Upvotes: 1

Views: 1418

Answers (4)

gion_13
gion_13

Reputation: 41533

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.

Upvotes: 0

Moorthy GK
Moorthy GK

Reputation: 82

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

Upvotes: 0

Luca Davanzo
Luca Davanzo

Reputation: 21520

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

Upvotes: 0

Muleskinner
Muleskinner

Reputation: 14468

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

Upvotes: 2

Related Questions