CSS transformam matrizes

Question

Estou usando as seguintes regras CSS para fazer uma transformação em um elemento H2 simples, apenas texto dentro dele:

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

Funciona como esperado no Firefox; Eu não trabalho no Safari/Windows e Chrome/Windows: o H2 fica onde está. Estou fazendo algo errado ou as transformações CSS não estão ativas nesses dois navegadores no Windows?

Answer 1

Há algum tipo de implementação, mas está definitivamente quebrada.

Se eu remover os PXs, posso fazê -lo para renderizar pelo menos (ele não parece renderizar com eles ou vê -lo como CSS válido), mas não deixa a tela rolar para baixo como o Firefox. Aponte -o para um local no quadro (sem o PX's) e ele é exibido. Remover os PXs também não parecem fazer diferença para a posição, o que é bom.

Answer 2

o MDC Docs são bem claros:

Nota: Gecko (Firefox) aceita um valor de comprimento para TX e TY. O Safari (WebKit) e o Opera atualmente suportam um número sem unidade para TX e TY.

Depois de um longo post explicando a lógica da matriz, Brendan Kenny conclui que é preciso

"Adicione unidades a E e F para o Firefox (o que realmente não faz sentido, mas por enquanto: tudo bem)."

O que é verdadeiro - para o computador - como as traduções lineares tecnicamente não são diferentes das outras entidades da matriz. Mas é injusto, como - para nós humanos - faz sentido lógico para as traduções lineares estarem em valores de valor e não há outra boa maneira de fazer com que o navegador faça cálculos percentuais.

Felizmente, a implementação do FF vencerá.

Como um aparte, li, mas ainda não testei que o terceiro e o quarto valores são inseridos no webkit em ordem, mas no FF e no IE ao contrário. Dos documentos:

-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 │
   └     ┘