Question

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

我想从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的缩放时，矩阵也会从矩阵（0,0,0,0,0,0）设置为矩阵（1,0,0,1,0,0）

修改

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

Answer 1

动画或转换变换时，必须插入变换函数列表。具有相同名称和相同数量的参数的两个变换函数以数字方式进行插值，而无需先前的转换。计算的值将具有相同数量的参数的相同变换函数类型。

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

然后在矩阵（0,0,0,0,0,0）的情况下显而易见，4X4结果矩阵是规模的

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

的积分

矩阵规模过渡不起作用

1 个答案: