Question

当我在transform:matrix()上使用转换时，我的动画中出现了奇怪的行为。我只更改了一个参数，但在转换过程中看起来它正在处理多个参数。

很难解释，所以这是一个例子：

＆＃13;

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);
}

＆＃13;

<div>
  <span></span>
</div>

＆＃13;

External jsbin link

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

Answer 1

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

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

<强> DEMO

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

Answer 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是完整的信息

在变换矩阵上转换的奇怪动画

2 个答案: