是一个css变换矩阵，相当于变换比例，偏斜，平移

Question

css 变换矩阵和变换比例，偏斜，平移等效吗？

根据this answer css变换矩阵值相当于旋转，倾斜和缩放功能，但是this post使它看起来更复杂......

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

• 参数 a和d 用于缩放元素。与比例（a，d）方法相同。

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

• 参数 e和f 用于翻译元素。与 translate（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变换 NOT commutative 。大多数数学运算都是可交换的，这意味着它们的应用顺序并不重要。但转换不是。订单非常重要，这就是我们在交换比例和翻译时看到不同结果的原因。

所以，以下转换

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 example

Another answer一个类似的问题解决了问题，感谢瓦尔斯