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

Question

css 变换矩阵和变换尺度,偏斜,平移等效吗？

根据这个答案, css变换矩阵值相当于旋转,倾斜和缩放功能,但这篇文章使它看起来更加复杂......

矩阵(a,b,c,d,e,f)

• 参数a和d用于缩放元素.与比例(a,d)方法相同.

• 参数b和c用于倾斜元素.与倾斜(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);  

这是由于排序,在这种情况下,它们都具有相同的顺序,并且平移位置不会乘以比例.

更新的codepen示例

由于瓦尔斯,一个类似问题的另一个答案解决了这个问题