CSS   发布时间:2022-04-17  发布网站:大佬教程  code.js-code.com
大佬教程收集整理的这篇文章主要介绍了css – 矩阵规模转换不起作用大佬教程大佬觉得挺不错的,现在分享给大家,也给大家做个参考。
我必须使用变换矩阵来动画变换:元素的比例.

我想从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);
}

@L_262_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结果矩阵是单一的

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

大佬总结

以上是大佬教程为你收集整理的css – 矩阵规模转换不起作用全部内容,希望文章能够帮你解决css – 矩阵规模转换不起作用所遇到的程序开发问题。

如果觉得大佬教程网站内容还不错,欢迎将大佬教程推荐给程序员好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。