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

Question

当我在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>

外部jsbin链接

正如你所看到的，它只应该为右下角设置动画（左上角也设置了动画，但在视图之外），但它似乎在左上角做了一些奇怪的事情。有什么办法绕过这个吗？在transform:matrix之间转换有什么技巧吗？

Answer 1

您可以使用transform: skewY(-28deg);而不是transform: matrix(1,-.5,0,1,0,0);和transform: skewY(0);而不是transform: matrix(1,0,0,1,0,0);

就像我在这里说的

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

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

也许在过渡的某个时刻（你必须计算）会出现一个奇异矩阵，动画函数必须回退到离散动画

以下是的完整信息

Answer 2

您可以做的是增加scaleX和scaleY，然后减少translateX:

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

演示

恶作剧？我不这么认为，但它的行为就像在照片编辑器（如Photoshop）中使用歪斜。如果您扭曲一个元素，然后再次扭曲它，使其恢复到原始状态（通过缓慢操作），您可能会看到相同的行为