变换矩阵上带有过渡的奇怪动画答案

【问题标题】：Strange animation with transition on transform matrix变换矩阵上带有过渡的奇怪动画
【发布时间】：2014-12-16 07:17:39
【问题描述】：

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

External jsbin link

如您所见，它应该只为右下角设置动画（左上角也设置了动画，但不在视线范围内），但它似乎在左上角做了一些奇怪的事情。任何想法如何解决这个问题？在transform:matrix 之间转换有什么技巧吗？

【问题讨论】：

标签： css transform css-transitions

【解决方案1】：

你可以做的是增加scaleX和scaleY然后减少translateX：

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

DEMO

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

【讨论】：

是的，我也开始使用音阶，但正如您所见，这会在左下角产生另一个问题，它会在再次下降之前上升一点。吹毛求疵，但我真的希望整个事情尽可能顺利。我只是想了解为什么它在右上角做任何事情。因为如果我“手动”通过动画，左上角根本不会发生任何事情......
哦...您可以尝试将原点更改为（0,0）或居中，这可能会有所帮助。

【解决方案2】：

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

就像我说的here

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

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

也许在过渡的某个点（你必须做数学）出现一个奇异矩阵，动画函数必须回退到离散动画

Here是完整信息

【讨论】：