CSS变换矩阵

Question

我正在使用以下CSS规则对一个简单的H2元素进行转换，只对其中的文本进行转换：

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

它在Firefox中按预期工作;我在Safari / Windows和Chrome / Windows中根本不工作：H2保持原样。我做错了什么，或者在Windows下的那两个浏览器中CSS转换不活跃？

Answer 1

有某种实现，但它肯定会被破坏。

如果我删除了px，我至少可以让它渲染（它似乎没有用它们渲染或将其视为有效的CSS），但它不会让屏幕像Firefox那样向下滚动到它。将它指向框架中的位置（没有px）并且它会显示。删除px似乎也没有对位置产生任何影响，这很好。

Answer 2

MDC docs非常明确：

  

注意：Gecko（Firefox）接受tx和ty的长度值。   Safari（WebKit）和Opera目前支持tx和ty的无单位数。

在解释the logic of the matrix的冗长帖子之后，Brendan Kenny得出结论，必须

  

“将单位添加到e和f中   Firefox（实际上并没有   感觉，但现在：很好）。“

对于计算机而言确实如此 - 因为线性平移在技术上与矩阵的其他实体没有什么不同。 但这对我们人类来说是不公平的，因为线性翻译在价值数量上具有逻辑意义，并且没有其他好方法可以让浏览器进行百分比计算。

希望FF的实施能够获胜。

顺便说一句，我已阅读但尚未测试第三和第四个值按顺序输入Webkit，但在FF和IE中反向输入。来自文档：

  

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