CSS转换矩阵是否等同于转换比例，偏斜，平移 [英] Is a css transform matrix equivalent to a transform scale, skew, translate

问题描述

css 变换矩阵和变换比例，偏斜，平移是否等效?

Are css transform matrix and transform scale, skew, translate equivalent?

根据此答案 css转换矩阵值等效于旋转，倾斜和缩放功能，但是

According to this answer css transform matrix values are equivalent to the rotate, skew and scale functions, however this post makes it seem much more complex...

• 自变量 a和d 用于缩放元素.与 scale(a，d)方法相同.

• arguments a and d are for scaling the element. Identical to that of the scale(a, d) method.

自变量 b和c 用于倾斜元素.与 skew(b，c)方法相同.

arguments b and c are for skewing the element. Identical to that of the skew(b, c) method.

自变量 e和f 用于翻译元素.与 translate(e，f)方法相同.

arguments e and f are for translating the element. Identical to that of the translate(e, f) method.

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

Is the transform matrix actually that simple?

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

So the following 2 transforms would be identical

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

推荐答案

它们并不完全等效

CSS转换是非可交换的.大多数数学运算是可交换的，这意味着它们的应用顺序无关紧要.但是转换不是不是.顺序非常重要，这是在交换比例尺和翻译时我们在此处看到不同结果的原因.

CSS transforms are NOT commutative. Most mathematic operations are commutative, meaning that the order they are applied doesn't matter. But transforms are not. The order is very important, and it is the reason we see different results here when scale and translation is swapped around.

所以，下面的转换

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

不等同于

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

在第一种情况下，您首先进行缩放，然后进行翻译

In the first case, you first zoom, and after that you translate

在第二个示例中，我们看到它平滑移动，因为它先平移然后缩放.因为它是先翻译的，所以在这种情况下比例不会相乘，因此我们可以为翻译提供一个等效的值

In the second example we see it move smoother, as it first translates and then scales. Because it first has translated in, the scale is not multiplied in this case, so we can give an equivalent value for the translation

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

实际上等于

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

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

And this is due to the ordering, in this case they both have the same order, and translation position is not multiplied by the scale.

更新的 codepen示例

另一个答案感谢瓦尔斯(Vals)

Another answer to a similar question which cleared up the issue, thanks to Vals

这篇关于CSS转换矩阵是否等同于转换比例，偏斜，平移的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！