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

Question

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

根据 this answer css transform matrix values 相当于旋转，倾斜和缩放功能如下

矩阵(a、b、c、d、e、f)

• 参数a 和d 分别用于在X 和Y 方向缩放元素。与 scale(a, d) 方法相同。

• 参数b 和c 用于倾斜元素。与 skew(b, c) 方法相同。

• 参数e 和f 分别用于在X 和Y 方向平移元素。与 translate(e, f) 方法相同。

我的问题是……这个信息不正确吗？因为正如我的示例所示，我必须给出完全不同的值才能使圆达到相同的比例和 x、y 位置。

Simple Codepen transform example

.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");

还有一个额外的小问题，为什么在我的示例中平移循环向左然后向右循环，但在使用变换矩阵时却非常平滑？

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 (....)

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