CODEWITHSUNDEEP
htmlcsstransform
svnm
svnm

Reputation: 24328

Is a css transform matrix equivalent to a transform scale, skew, translate

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

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...

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

Is the transform matrix actually that simple?

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); 
}

Upvotes: 8

Views: 4843

Answers (1)

svnm
svnm

Reputation: 24328

They are not exactly equivalent

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.

So, the following transform

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

is not equivalent to 

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);

is actually equivalent to 

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.

An updated codepen example

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

Upvotes: 9

Related Questions