9

我必须使用变换矩阵来动画变换：元素的比例。

我想从 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 中不起作用......

console_log 调试输出表明，在从 0 缩放到 1 时，矩阵也会从 matrix(0,0,0,0,0,0) 设置为 matrix(1,0,0,1,0,0)。

编辑：

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

4

1 回答 1

3

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

特殊规则适用于 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/的学分

于 2015-06-07T06:47:28.130 回答