CSS变换矩阵和变换比例、倾斜、平移是否等效？

Question

css的变换矩阵（transform matrix）和缩放、倾斜、平移（transform scale, skew, translate）是否等同？根据这个答案，css变换矩阵值等同于旋转、倾斜和缩放函数，然而这篇文章则表明更为复杂...

matrix(a, b, c, d, e, f)

• 参数a和d用于缩放元素，与scale(a,d)方法相同。

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

• 参数e和f用于平移元素，与translate(e,f)方法相同。

变换矩阵真的那么简单吗？

因此以下这两个转换是相同的：

.scale-in {
  transform: scale(3,3) translate(200px, 200px);  
}
.scale-in-matrix {
  transform: matrix(3, 0, 0, 3, 200, 200); 
}

- svnm

Answer 1

它们并不完全等同。

CSS转换不是可交换的。大多数数学运算都是可交换的，这意味着应用它们的顺序并不重要。但是转换不是如此。顺序非常重要，这就是为什么当缩放和平移被交换时，我们会看到不同的结果的原因。

因此，以下转换：

transform: scale(2,2) translate(-100px,-50px);  

不等同于

transform: translate(-100px,-50px) scale(2,2);  

在第一个案例中，您首先缩放，然后再平移。

在第二个示例中，我们看到它移动得更顺畅，因为它首先平移，然后再缩放。因为它先平移了，所以在这种情况下不会乘以比例尺，因此我们可以为平移给出等效值。

transform: matrix(2, 0, 0, 2, -200, -100); 

实际上等同于

transform: translate(-200px,-100px) scale(2,2);  

由于排序的原因，它们在这种情况下具有相同的顺序，并且翻译位置不会乘以比例。

一个更新的codepen示例 另一个类似问题的答案，感谢Vals澄清了这个问题。

- svnm