Text rotation on Internet explorer

Question

Possible Duplicate:
CSS rotate property in IE

Can any one help here to rotate the text on IE- 8, IE -7 versions. it is working on Chome, firefox, IE-9, but doesn`t have any results on 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);
}

Simon Dragsbæk · Answer 1 · 2015-01-21T15:11:03.577

5

i wouldn't pref to do it in any browser cause they all render it very different.. but you could do it with javascript

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

Commands $('#theimage').rotateRight(45); $('#theimage').rotateLeft();

This would render it the same in IE 9, chrome, firefox, opera and safari cause its using a canvas object instead of turning the text by browser rendering

It will use the old codings for ie8, 7 & 6 Generate it 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 (margins need to be different in chrome and other browsers cant say why but it does)

If you dont know how to differ css trough out the different browsers see this link

My opinion

Beside all this i would recommend you make it as a picture (already rotated) using photoshop or if your dont have access to such programs use free (GIMP)

edited Jan 21 '15 at 15:11

answered Nov 26 '12 at 08:16

Simon Dragsbæk

2,367
3
30
53

how about older IE browsers? – Raptor Nov 26 '12 at 08:16
i will use the -ms-filter and filter: progid – Simon Dragsbæk Nov 26 '12 at 08:16
just read from the library page, it supports IE7 & IE8. Not tested yet. – Raptor Nov 26 '12 at 08:18
Quote from site "The library has been tested with: Mozilla FireFox 2.0.0.2, Internet Explorer 7.0, Opera 9.1 (note Opera 8 is not supported)" – Simon Dragsbæk Nov 26 '12 at 08:23
Yes Even i've tried with jquery but the older browser of IE doesnot supporting the text rotation. – Kiran SKK Nov 26 '12 at 08:26
Can you please give me any demo link so that i can test the same on the IE older version and can use the same. – Kiran SKK Nov 26 '12 at 08:27
I have given you a working test without the JS cause i dont have a git where i can link to :) – Simon Dragsbæk Nov 26 '12 at 08:42
@KiranSKK remember to inspect your testing (use chrome or firebug) for css debugging, the rotate causes alot of displacement so use margins to replace it or (position: absolute;) – Simon Dragsbæk Nov 26 '12 at 08:46

score 0 · Answer 2 · edited Jan 08 '16 at 13:09

/* 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);

score 0 · Answer 3 · answered Nov 26 '12 at 09:50

Try to use this online service:

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

It transform css3 rule

rotate(-90deg)

applied on div with WIDTH: 220px; HEIGHT: 70px;

to IE specific 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;

}

Text rotation on Internet explorer

3 Answers3