矩阵转换不工作 [英] matrix scale transition not working

问题描述

我必须使用转换矩阵来动画变换：元素的缩放。

I have to use the transform matrix to animate transform: scale of an element.

我想从0到1缩放。
如果我使用以下代码可以正常工作：

I want to scale from 0 to 1. If I use the following code it works properly:

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

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

如果我使用矩阵本身，则不工作。

If I use the matrix itself, it is not working.

.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 ...

Am I doing anything wrong or is this just not working? I'm wondering, because it doesn't work in Chrome and Firefox...

console_log调试输出说，从0到1的矩阵也设置从矩阵（0,0,0,0,0,0）到矩阵（1,0,0,1,0,0）。

The console_log debug output says that at scaling from 0 to 1 the matrix gets also set from matrix(0,0,0,0,0,0) to matrix(1,0,0,1,0,0).

：

总混淆...如果我将矩阵中的scaleX和scaleY值更改为0.1或0.01，它会工作... wow

Total confusion... If I change the scaleX and scaleY values in the matrix to 0.1 or 0.01 it works... wow

推荐答案

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

When animating or transitioning transforms, the transform function lists must be interpolated. Two transform functions with the same name and the same number of arguments are interpolated numerically without a former conversion. The calculated value will be of the same transform function type with the same number of arguments.

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

Special rules apply to rotate3d(), matrix(), matrix3d() and perspective(). The transform functions matrix(), matrix3d() and perspective() get converted into 4x4 matrices first and interpolated. If one of the matrices for interpolation is singular or non-invertible (iff its determinant is 0), the transformed element is not rendered and the used animation function must fall-back to a discrete animation according to the rules of the respective animation specification.

然后在矩阵（0,0,0,0,0,0）的情况下，很明显，尺度的4X4结果矩阵是奇异值

Then in the case of matrix(0,0,0,0,0,0) it's obvious, the 4X4 result matrices for scale are singulars

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

这篇关于矩阵转换不工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！