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变形不会生效？

- Kaze no Koe

Answer 1

MDC文档非常清晰：

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

在详细解释了矩阵逻辑后，Brendan Kenny得出结论，必须“为Firefox添加单位e和f（这并不真正有任何意义，但现在可以：好吧）。 ”

这是正确的-对于计算机而言-因为线性转换在技术上与矩阵的其他实体没有区别。但是，对我们人类来说，这是不公平的，因为线性转换以值量的方式具有逻辑意义，而且没有其他很好的方法可以让浏览器进行百分比计算。

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

- SamGoody

Answer 2

有某种实现方式，但肯定是有问题的。

如果我删除 px，至少可以使其呈现（它似乎不会将其视为有效的 CSS），但它不像 Firefox 那样让屏幕向下滚动到它的位置。不过，将其指向框架中的位置（没有 px）它确实会显示。删除 px 对位置似乎没有任何影响，这是好事。

- tom

---

我不是有意冒犯，但截图太小了，我甚至看不清你在说什么。抱歉。 - Kaze no Koe

基本上，-webkit-transform: matrix(0, -1, 1, 0, 130, 118); 是有效的，但是-webkit-transform: matrix(0, -1, 1, 0, 130px, 118px); 却无效。我不知道为什么。WebKit也假定最后两个参数是像素，所以你会得到与Firefox相同的渲染结果。 - tom