Consistent CSS rotation start between IE8 and everything else?

Question

It is possible to use cross-browser text rotation in CSS using changes in transform:rotate(XXdeg); for regular browsers (incl. IE9 +, using the prefixes -moz- , -webkit- , -ms- for older versions). Then for IE8 and co (should work in IE6 +, although IE6 and IE7 are almost not worried: IE8 is still a concern) using matrix transformations such as:

 filter: progid:DXImageTransform.Microsoft.Matrix( M11=[ COSINE OF ANGLE ], M12=[ SINE OF ANGLE ], M21=[ -1 x SINE OF ANGLE ], M22=[ COSINE OF ANGLE ], sizingMethod='auto expand); 

... eg. filter: progid:DXImageTransform.Microsoft.Matrix(M11=0.76604444, M12=0.64278761, M21=-0.64278761, M22=0.76604444,sizingMethod='auto expand');

---

The problem is , these two methods have different transformation roots, which means that although they will have the same angles, the location of the rotating element depends on the browsers and depends on the angle and size of the element, fixing it with positioning is not an easy task.

Here is a live demo illustrating this: http://jsbin.com/edudof/2/

In non-IE8, you can set the start of a conversion like this - transform-origin: 50% 50%; (indicates the default value). I can’t find the equivalent with the conversion of the IE8 filter matrix, and I tried to install a non-IE source according to the IE source code (which I read, albeit on random blogs), apparently the item is in the upper left corner but transform-origin: top left; switched off).

I'm not really worried about the origin of the conversion (although getting only 50% to 50% would be ideal). Priority has consistent results in browsers.

---

Two more things I found and tried:

• A very long article describing a theoretical (untested?) Approach that could be used to encode something that does this in Javascript. This requires manual positioning, as well as two additional layers of matrix manipulation. https://github.com/heygrady/transform/wiki/correcting-transform-origin-and-translate-in-ie
• Javascript css3Sandpaper library . It has 3 dependencies and in all my tests, including just running the included test files - it actually doesn’t rotate anything (no errors, it just doesn’t do anything)

Answer 1

Well, that wasn’t easy ... Spudley's comment confirmed my suspicion that it was worth writing down manually entered CSS as a lost cause. There seems to be no easy way to make IE rotate to match other browsers by origin without very complex matrix calculations to rotate and translate, as well as another calculation of how much to compensate for the object's post-rotation using top: left: etc.

---

The option that seems to work best is the smallest code, the least number of non-standard dependencies - jquery.transform2d.js through the louisremi jquery.transform branch .

Here's an example demo where the rotation position is almost perfect in pixels between IE7, IE8, IE9 + and Firefox, Chrome, etc. http://jsbin.com/ejiqov/3 .

Apply the rotation as follows: $('somejQuery').css('transform','rotate(90degs)'); or for animated rotation , for example: $('somejQuery').animate('transform','rotate(90degs)');

This demo shows the only limitation that I have encountered so far (touch tree) with the JQuery Transform plugin for simple rotation (except for the jQuery requirement):

• It erases any positioning ( top: left: on the element that it rotates.
  • Workaround: Apply positioning to the wrapper element and rotate the inner element. This seems to work fine (see demo above)