我必须使用变换矩阵来动画变换：元素的比例.
我想从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);
transition: transform 1s;
}
.container.open {
transform: matrix(1,1,0);
}
https://jsfiddle.net/m7qpetkh/1/
我做错了什么或者这不起作用？我想知道,因为它在Chrome和Firefox中不起作用……
console_log调试输出表示在从0到1的缩放时,矩阵也从矩阵(0,0)到矩阵(1,0)设置.
编辑：
完全混淆……如果我将矩阵中的scaleX和scaleY值更改为0.1或0.01,它就可以工作……哇
解决方法
动画或转换变换时,必须插入变换函数列表.具有相同名称和相同数量的参数的两个变换函数以数字方式进行插值而无需先前的转换.计算的值将具有相同数量的参数的相同变换函数类型.
特殊规则适用于rotate3d(),matrix(),matrix3d()和perspective().变换函数matrix(),matrix3d()和perspective()首先被转换为4×4矩阵并进行插值.如果用于插值的矩阵之一是奇异的或不可逆的(如果其行列式为0),则不渲染变换的元素,并且所使用的动画函数必须根据相应动画规范的规则回退到离散动画.
然后在矩阵(0,0)的情况下,显而易见的是,用于比例的4X4结果矩阵是单一的
