Css 变换矩阵上具有变换的奇怪动画

当我在

transform:matrix（）

上使用transition时，我的动画中出现了一种奇怪的行为。我只更改了一个参数，但在转换过程中，它似乎处理了多个参数

很难解释，下面是一个例子：

div{
宽度：200px；
高度：400px；
边框：1px纯黑；
位置：相对位置；
溢出：隐藏；
}
跨度{
位置：绝对位置；
排名：0；
左：0；
右：0；
底部：0；
背景：红色；
变换：矩阵（1，-.5,0,1,0,0）；
变换原点：左下角；
转型：转型。5s轻松；
}
分区：悬停范围{
变换：矩阵（1,0,0,1,0,0）；
}

---

您可以增加

scaleX

和

scaleY

然后减少

translateX

：

transform: matrix(1.2, 0, 0, 1.2, -30, 0);

把戏？我不这么认为，但它的行为就像在照片编辑器（例如Photoshop）中使用skew一样。

---

如果扭曲一个元素，然后再次扭曲它以使其恢复到原始状态（通过缓慢操作），您可能会看到相同的行为

您可以使用

transform:skewY（-28度）而不是
变换：矩阵（1，-.5,0,1,0,0）和
变换：skewY（0）而不是
变换：矩阵（1,0,0,1,0,0）

就像我说的

设置变换动画或变换时，必须插值变换函数列表。两个具有相同名称和相同参数数的变换函数在不进行前一次转换的情况下进行数值插值。计算值将是具有相同参数数的相同转换函数类型

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

可能在过渡的某个点（你必须做数学运算）出现一个奇异矩阵，动画函数必须返回到离散动画

完整信息是吗？
是的，我也开始玩电子秤，但正如你所见，这在左下角产生了另一个问题，它会上升一点，然后再下降。吹毛求疵，但我真的希望整个事情尽可能顺利。我只是想了解为什么它会对右上角做任何事情。因为如果我“手动”通过动画，在左上角不会发生任何事情…哦。。。您可以尝试将原点更改为（0,0）或中心，这可能会有所帮助。