Html css变换矩阵是否等效于变换比例、倾斜、平移

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

根据css，变换矩阵值等价于旋转、倾斜和缩放函数，但使其看起来更复杂

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

• 参数a和d用于缩放元素。与比例（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); 
}

---

它们并不完全相同

CSS转换是不可交换的。大多数数学运算都是可交换的，这意味着它们的应用顺序无关紧要。但转换不是。顺序是非常重要的，这也是我们在这里看到不同结果的原因，当缩放和平移交换时

因此，下面的转换

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

不等于

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

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

在第一种情况下，首先进行缩放，然后进行平移

在第二个示例中，我们看到它移动更平滑，因为它首先平移，然后缩放。因为它首先进行了平移，所以在这种情况下，比例不会成倍增加，所以我们可以为平移提供一个等价值

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

实际上相当于

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

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

这是因为顺序，在这种情况下，它们都有相同的顺序，平移位置不会乘以比例

更新的

感谢VAL，一个类似的问题解决了这个问题