CSS transform matrices

Question

I'm using the following CSS rules to do a transformation on a simple H2 element, only text inside it:

-moz-transform: matrix(0, -1, 1, 0, 130px, 118px);
-webkit-transform: matrix(0, -1, 1, 0, 130px, 118px);

It works as expected in Firefox; i doesn't work at all in Safari/Windows and Chrome/Windows: the H2 stays where it is. Am I doing something wrong or are CSS transforms not active in those two browsers under Windows?

Answer 1

There is some sort of implementation, but it's definitely broken.

If I remove the px's I can get it to render at least (it doesn't seem to render with them or see it as valid CSS), but it doesnt let the screen scroll down to it like Firefox does. Point it to an location in frame though (without the px's) and it does display. Removing the px's don't seem to make any difference to the position either, which is good.

Answer 2

The MDC docs are pretty clear:

Note: Gecko (Firefox) accepts a length value for tx and ty. Safari (WebKit) and Opera currently support a unitless number for tx and ty.

After a lengthy post explaining the logic of the matrix, Brendan Kenny concludes that one must

"add units to e and f for Firefox (which doesn’t really make any sense, but for now: fine)."

Which is true - for the computer - as the linear translations are technically no different than the other entities of the matrix. But it is unfair, as - for us humans - it makes logical sense for the linear translations to be in value amounts, and there is no other good way to get the browser to do percentage calculations.

Hopefully, the FF implementation will win.

As an aside, I have read, but not yet tested that the third and fourth values are input into Webkit in order, but in FF and IE in reverse. From the docs:

-moz-transform: matrix(a, c, b, d, tx, ty)

Where a, b, c, d build the transformation matrix and tx, ty are the translate values. 
   ┌     ┐ 
   │ a b │
   │ c d │
   └     ┘