是一个 css 转换矩阵，相当于一个转换缩放、倾斜、平移

Question

css 变换矩阵和变换缩放、倾斜、翻译等效吗？

根据这个答案，css 变换矩阵值等效于旋转、倾斜和缩放函数，但是这篇文章让它看起来要复杂得多......

矩阵(A， B， C， D， E， F(

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

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

• 参数 e 和 f 用于翻译元素。与翻译(e， f(方法相同。

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

因此，以下 2 个转换将是相同的

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

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

这是由于排序，在这种情况下，它们都具有相同的顺序，并且平移位置不会乘以刻度。

更新的代码笔示例

对

一个类似问题的另一个答案解决了这个问题，这要归功于瓦尔斯