internet explorer - Consistent origin in CSS rotation between IE8 and everything else?

Question

It's possible to get cross-browser text rotation in CSS using variations on transform:rotate(XXdeg); for normal browsers (inc. IE9+, using with -moz-, -webkit-, -ms- prefixes to cover older versions). Then, for IE8 and co (should work in IE6+, though IE6 and IE7 are almost no longer concerns: IE8 is still a concern), using matrix transforms like this:

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

...e.g. 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 transform origins, which means that while they will have the same angles, the location of the rotated element varies between browsers, and how it varies depends on the angle and size of the element, making fixing it with positioning not a simple task.

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

In non-IE8, it's possible to set a transform origin like this - transform-origin: 50% 50%; (specifies the default). I can't find any equivalent with IE8's filter matrix transform, and I've tried setting the non-IE origin to match the IE origin (which I've read - albeit on random blog articles - is apparently on the top left of the element, but transform-origin: top left; is way off).

I'm not so bothered about what the the transform origin is (although getting everything to 50% 50% would be ideal). The priority is having a consistent result across browsers.

---

Two more things I've found and tried:

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

Answer 1

Well this turned out not to be simple... Spudley's comment confirmed my suspicion that it's worth writing off manually entered CSS as a lost cause. It seems there's no simple way to make IE rotations match other browsers in origin without very complex matrix calculations to rotate and translate and also another calculation for how much to offset the object post-rotation using top: left: etc...

---

The option that seems to work best - least code, fewest non-standard dependencies - was jquery.transform2d.js via the louisremi branch of jquery.transform.

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

Apply rotations like this: $('somejQuery').css('transform','rotate(90degs)'); or for animated rotation, like this: $('somejQuery').animate('transform','rotate(90degs)');

That demo shows the one limitation I've come across so far (touch wood) with the Jquery Transform plugin for simple rotation (other than requiring jQuery):

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