css变换矩阵和等价css变换是不同的 [英] css transform matrix and equivalent css transform are different

问题描述

我有一个简单的CSS变换，当我使用CSS变换矩阵时，它工作得很好，

根据这个回答 css变换矩阵值等价于旋转，倾斜和缩放函数如下

matrix（a，b，c，d，e，f）

• 参数 a和d 分别用于在X和Y方向上缩放元素。与 scale（a，d）方法相同。




• 参数 b和c 用于偏斜元件。与 skew（b，c）方法相同。




• 参数 e和f 用于分别在X和Y方向上平移元素。与 translate（e，f）方法的相同。

... 此信息不正确吗？，因为在我的例子中，我必须给出完全不同的值，才能将圆形放入相同的尺度和x，y位置。

简单的Codepen转换示例

  .scale-in {
 transition：All 1s ease-in-out; 
 transform：scale（3,3）translate（-170px，-80px）; 
} 
 .scale-in-matrix {
 transition：All 1s ease-in-out; 
 transform：matrix（3，0，0，3，-500，-250）; 
} 
  

您可以在我的示例中通过将第6行的JavaScript更改为：

  this.classList.add（scale-in-matrix）; 
  

还有一个小问题，为什么在我的例子中，translate循环离开然后回到右边但是使用转换矩阵时非常平滑？

解决方案

你需要理解大多数转换不是交换的。

大多数数学运算是可交换的，也就是说，它们应用的顺序并不重要。但是变换不是。顺序是非常重要的。如果您首先执行翻译，然后进行缩放，或者如果您执行相反操作，则平移和缩放的组合会产生不同的结果。

因此，它不一样

  transform：scale 3,3）translate（-170px，-80px）; 
  

比

  transform：translate（-170px，-80px）scale（3,3）; 
  

在第一种情况下，首先翻译，然后缩放。因此，初始变换乘以3，它等效于

  transform：translate（-510px，-240px）scale （3,3）; 
  

这种转换非常接近矩阵。如果你看得更近，你会看到你的矩阵结果不完全等于你的变换结果。

顺便说一下，矩阵乘法表现出相同的行为。乘以2个矩阵的顺序很重要。
为了使事情变得容易，在变换CSS中设置变换的顺序与矩阵乘法工作相同。
so，

  transform：translate（x，y）scale（fz，fy）
  
 
 
 
给出与
相同的结果
 
 
  transform：matrix（....）
  
其中矩阵计算为
 
 
 
矩阵等效的乘以矩阵相当于规模
 
I have a simple css transform, and it works nicely when I use css transform matrix, 

According to this answer css transform matrix values are equivalent to the rotate, skew and scale functions as follows

matrix(a, b, c, d, e, f)


arguments a and d are for scaling the element in the X and Y direction respectively. Identical to that of the scale(a, d) method.
arguments b and c are for skewing the element. Identical to that of the skew(b, c) method.
arguments e and f are for translating the element in the X and the Y direction respectively. Identical to that of the translate(e, f) method.


My question is... Is this information incorrect? because as my example shows I had to give totally different values to get the circle into the same scale and x,y position.

Simple Codepen transform example
.scale-in {
  transition:All 1s ease-in-out;
  transform: scale(3,3) translate(-170px,-80px);  
}
.scale-in-matrix {
  transition:All 1s ease-in-out;
  transform: matrix(3, 0, 0, 3, -500, -250); 
}
You can test this out in my example by changing the JavaScript on line 6 to:
this.classList.add("scale-in-matrix");
Also as a small additional question, why does the translate loop left and then back to right in my example but it is extremely smooth when using transform matrix?
解决方案
You need to understand that most transforms are NOT commutative.

Most mathematic operations are commutative, that is the order in wiche they are applied doesn't matter. But transforms are not. The order is very important. The combination of translation and zoom gives different results if you first do the translation and then the zoom, or if you do the opposite. 

So, it is not the same 
transform: scale(3,3) translate(-170px,-80px);  
than 
transform: translate(-170px,-80px) scale(3,3);  
In the first case, you first translate , and after that  you zoom. So, the initial transform is multiplied by 3, and it is equivalent to
transform: translate(-510px,-240px) scale(3,3);  
And this transform is quite close to you matrix . If you look closer, you will see that your matrix result is not exactly equal to your transform result.

By the way, matrices multiplication exhibits the same behavior. The order in wich you multiply 2 matrices is important. 
To make thing easy, the order in wich you set the transforms in the transform CSS is the same in wich the matrices multiplication works.
so , 
transform: translate(x, y) scale(fz, fy) 
gives the same result as 
transform: matrix (....)
where matrix is calculated as

matrix equivalent of the translation multiplied by matrix equivalent to the scale

                        
这篇关于css变换矩阵和等价css变换是不同的的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！