变换矩阵上带有过渡的奇怪动画
当我在transform:matrix()上使用变换时，我的动画中出现了奇怪的行为。我只更改了一个参数，但在转换过程中，它似乎正在处理多个参数。
很难解释，所以这里有一个例子：
div {
width: 200px;
height: 400px;
border: 1px solid black;
position: relative;
overflow: hidden;
}
span {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: red;
transform: matrix(1, -.5, 0, 1, 0, 0);
transform-origin: left bottom;
transition: transform .5s ease;
}
div:hover span {
transform: matrix(1, 0, 0, 1, 0, 0);
}<div>
<span></span>
</div>
正如您所看到的，它应该只为右下角设置动画(左上角也设置了动画，但看不到)，但它似乎在左上角做了一些奇怪的事情。有什么办法可以解决这个问题吗？
回答 2
Stack Overflow用户
发布于 2015-06-07 07:51:10
您可以使用transform: skewY(-28deg);而不是transform: matrix(1,-.5,0,1,0,0);，可以使用transform: skewY(0);而不是transform: matrix(1,0,0,1,0,0);
就像我说的here
在设置变换动画或变换时，必须对变换函数列表进行插值。具有相同名称和相同数目的参数的两个转换函数是在没有先前转换的情况下进行数值插值的。计算值将具有相同的转换函数类型和相同数量的参数。
特殊规则适用于rotate3d()、矩阵()、matrix3d()和透视()。变换函数矩阵()、matrix3d()和透视()首先转换为4x4矩阵并进行插值。如果用于插值的矩阵之一是奇异的或不可逆的(当其行列式为0)，则不呈现变换的元素，并且所使用的动画函数必须根据相应动画规范的规则回退到离散动画。
也许在转换过程中的某个时刻(你必须做数学运算)出现一个奇异矩阵，动画函数必须退回到离散的动画
Here是完整的信息
Stack Overflow用户
发布于 2014-10-21 09:53:04
您可以做的是增加scaleX和scaleY，然后减少translateX
transform: matrix(1.2, 0, 0, 1.2, -30, 0);把戏？我不这么认为，但它的行为就像在照片编辑器(例如Photoshop)中使用skew一样。如果您扭曲一个元素，然后再次扭曲它以使其恢复到其原始状态(通过缓慢地进行)，您可能会看到相同的行为
https://stackoverflow.com/questions/26480363
复制
腾讯云开发者
