Rotating text in Internet Explorer

Question

Possible duplicate:
CSS rotate property in IE

Can anyone help here to rotate text in versions of IE-8, IE -7. he works on Chome, firefox, IE-9, but has no results in IE-8, IE-7.

<a href="#" class="beta_home">BETA</a> css a.beta_home{ position: absolute; text-decoration: none; top: 12px; right:0; margin-left: 0px; font-size: 9px; color:red; border: 1px solid #fff; display: block; -webkit-transform: rotate(-90deg); -moz-transform: rotate(-90deg); -ms-transform: rotate(-90deg); -o-transform: rotate(-90deg); filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3); } 

Answer 1

I would not want to do this in any browser, because they all displayed it in a completely different way .. but you could do it with javascript

Documentation http://code.google.com/p/jquery-rotate/

$ ('# Theimage') commands rotateRight (45). $ ('# Theimage') rotateLeft () ;.

This would provide the same in IE 9, chrome, firefox, opera and safari, because it uses a canvas object instead of rotating the text using browser rendering

It will use the old encodings for ie8, 7 and 6. Create here

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

Working ex

IE 7 & 8 tested Fiddle (fields should be different in chrome, and other browsers cannot say why, but it is)

If you do not know how to distinguish css from different browsers, see the link

My opinion

Besides all this, I would recommend you do it as an image (already rotated) using Photoshop or if you do not have access to such programs, use the free ( GIMP )

Answer 2

 /* IE8+ - must be on one line, unfortunately */ -ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=1, M12=-0.1763269807084645, M21=0, M22=1, SizingMethod='auto expand')"; /* IE6 and 7 */ filter: progid:DXImageTransform.Microsoft.Matrix( M11=1, M12=-0.1763269807084645, M21=0, M22=1, SizingMethod='auto expand'); /* For IE6 and 7 */ filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1); 

Answer 3

Try using this online service:

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

Converts a css3 rule

 rotate(-90deg) 

applied to a div using WIDTH: 220px; HEIGHT: 70px; WIDTH: 220px; HEIGHT: 70px;

for specific IE rules:

 /* * The following two rules are for IE only and * should be wrapped in conditional comments. * The -ms-filter rule should be on one line * and always *before* the filter rule if * used in the same rule. */ #transformedObject { /* IE8+ - must be on one line, unfortunately */ -ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=3.061515884555943e-16, M12=1, M21=-1, M22=3.061515884555943e-16, SizingMethod='auto expand')"; /* IE6 and 7 */ filter: progid:DXImageTransform.Microsoft.Matrix( M11=3.061515884555943e-16, M12=1, M21=-1, M22=3.061515884555943e-16, SizingMethod='auto expand'); /* * To make the transform-origin be the middle of * the object. Note: These numbers * are approximations. For more accurate results, * use Internet Explorer with this tool. */ margin-left: 71px; margin-top: -78px; }