矩阵比例转换无法正常工作

Question

我需要使用变换矩阵来动画化一个元素的 transform: scale。

我希望将其从 0 缩放到 1。 如果我使用以下代码，它可以正常工作：

.container {
    width: 200px;
    height: 100px;
    background: yellow;
    transform: scale(0);
    transition: transform 1s;
}
.container.open {
    transform: scale(1);
}

https://jsfiddle.net/w4kuth78/1/

如果我使用矩阵本身，它是不起作用的。

.container {
    width: 200px;
    height: 100px;
    background: yellow;
    transform: matrix(0, 0, 0, 0, 0, 0);
    transition: transform 1s;
}
.container.open {
    transform: matrix(1, 0, 0, 1, 0, 0);
}

https://jsfiddle.net/m7qpetkh/1/

我做错了什么还是这个代码根本就不起作用？我有疑问，因为它在Chrome和Firefox中都不起作用...

控制台调试输出显示，在从0缩放到1时，矩阵也从matrix(0,0,0,0,0,0)设置为matrix(1,0,0,1,0,0)。

编辑：

完全混乱...如果我将矩阵中的scaleX和scaleY值更改为0.1或0.01，则可以正常工作...哇

- yacon

---

非常奇怪！看起来其他矩阵变换值也很难进行动画处理https://jsfiddle.net/zvgcg0o0/。 由于某种原因，IE11可以轻松处理您的两个演示文稿以及我刚刚制作的内容。 - sudo rm -rf slash

你已经回答了自己的问题。0.001 是最小的值，仍然可以进行过渡效果。我不确定为什么零会禁用动画，但它确实会这样做。 - Wray Bowling

似乎没有关于此问题的错误报告，因此可能值得提交一个。如果这确实不是一个错误（我不确定为什么不是），您至少可以让工程师澄清行为：https://code.google.com/p/chromium/issues/entry - Adam Jenkins

我创建了一个问题并得到了答案，YandY Viera提到。 https://code.google.com/p/chromium/issues/detail?id=494914所以这不是一个错误，也不会被修复。 - yacon

Answer 1

当进行变换动画或过渡变换时，必须对变换函数列表进行插值。具有相同名称和相同参数数量的两个变换函数将在不进行转换的情况下进行数值插值。计算出的值将是具有相同变换函数类型和相同参数数量的值。

对于rotate3d()、matrix()、matrix3d()和perspective()，有特殊规则适用。变换函数matrix()、matrix3d()和perspective()首先被转换为4x4矩阵并进行插值。如果用于插值的矩阵是奇异的或不可逆的（其行列式为0），则不会呈现变换元素，并且所使用的动画函数必须根据相应动画规范的规则回退到离散动画。

然后，对于matrix(0,0,0,0,0,0)，很明显，缩放的4X4结果矩阵是奇异的。

来源：http://www.w3.org/TR/css3-2d-transforms/

- Yandy_Viera