Question

我有一个简单的css变换，当我使用css变换矩阵时它很好用，

根据this answer css变换矩阵值相当于旋转，倾斜和缩放函数，如下所示

矩阵（a，b，c，d，e，f）

参数 a和d 分别用于在X和Y方向上缩放元素。与比例（a，d）方法相同。
参数 b和c 用于倾斜元素。与倾斜（b，c）方法相同。
参数 e和f 分别用于在X和Y方向上平移元素。与 translate（e，f）方法相同。

我的问题是...... 这些信息是否不正确？因为我的例子显示我必须提供完全不同的值才能使圆圈进入相同的比例和x，y位置。

.scale-in {
  transition:All 1s ease-in-out;
  transform: scale(3,3) translate(-170px,-80px);  
}
.scale-in-matrix {
  transition:All 1s ease-in-out;
  transform: matrix(3, 0, 0, 3, -500, -250); 
}

您可以在我的示例中通过将第6行的JavaScript更改为：

来测试这一点

this.classList.add("scale-in-matrix");

另外作为一个小小的附加问题，为什么在我的例子中，translate循环左后然后回到右边，但是在使用变换矩阵时它非常平滑？

Answer 1

您需要了解大多数变换都不是可交换的。

大多数数学运算都是可交换的 - 也就是说，它们的应用顺序无关紧要。但转型不是。订单非常重要。如果您首先进行平移然后进行缩放，或者如果您执行相反操作，则平移和缩放的组合会产生不同的结果。

所以这个：

transform: scale(3,3) translate(-170px,-80px);

与此不同：

transform: translate(-170px,-80px) scale(3,3);

在第一种情况下，首先进行翻译，然后进行缩放。所以初始变换乘以3，相当于

transform: translate(-510px,-240px) scale(3,3);

这个变换非常接近你的矩阵。如果仔细观察，您会发现矩阵结果与变换结果不完全相同。

顺便说一下，矩阵乘法表现出相同的行为。乘以两个矩阵的顺序很重要。为了简单起见，在transform CSS中设置变换的顺序与矩阵乘法的工作方式相同。所以

transform: translate(x, y) scale(fz, fy)

给出与

相同的结果

transform: matrix (....)

其中矩阵计算为平移乘以矩阵等效的矩阵等效矩阵。

css变换矩阵和等效的css变换是不同的

1 个答案: