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

Question

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

根据this answercss变换矩阵值等价于旋转、倾斜和缩放函数如下

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

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