矩阵缩放转换不起作用

我必须使用转换矩阵来为元素的transform：缩放设置动画效果。矩阵缩放转换不起作用

我想规模从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它的工作原理...哇

来源

2015-05-29 yacon

很奇怪！看起来像其他矩阵转换值也很难做动画https://jsfiddle.net/zvgcg0o0/。无论出于何种原因，IE11都可以处理您的演示以及我刚才没有遇到的问题。 –

你真的回答了你自己的问题。 0.001尽可能小，并且仍然有过渡。我不确定零为什么禁用动画的确切原因，但它确实如此。 –

看起来不存在这样的错误报告，它可能值得提交一个。如果它确实不是一个错误（我不确定它不会如何），那么您至少可以让工程师澄清其行为：https://code.google.com/p/chromium/issues/entry – Adam

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

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

然后在矩阵（0,0,0,0,0,0）的情况下，很明显，对于规模4X4结果矩阵是英文单

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

来源

2015-06-07 06:47:28

矩阵缩放转换不起作用

回答

相关问题