Why transform : skew(30deg); is not same as transform : matrix(1,0,30,1,0,0);?

user_16481850 0
Viewed 83

Compare the following two code snippets-

.box {
  width: 100px;
  height: 100px;
  background-color: red;
  display: inline-block;
}

.box1 {
  margin: 100px;
  transform: skew(30deg);
}
<div class="box box1"></div>

.box {
  width: 100px;
  height: 100px;
  background-color: red;
  display: inline-block;
}

.box2 {
  transform: matrix(1, 0, 30, 1, 0, 0);
}
<div class="box box2"></div>

In the first code snippet I have used transform: skew(30deg); and in the second one I have used transform: matrix(1,0,30,1,0,0); As you can see in matrix() function I have remained all the arguments to their default value except skewX() and I change it to 30. Which should work like skew(30deg) according to my assumption. Since the documentation says matrix() take arguments like below:

matrix( scaleX(), skewY(), skewX(), scaleY(), translateX(), translateY() );

IF you run the above code snippets then you found different outputs. Why they are not same? As my assumption says it should be equal because I have used skewX(30deg) for both cases.

How the matrix() function actually works?

What units are used for scaleX(), skewY(), skewX(), scaleY(), translateX(), translateY() in the matrix function? As transform: skew(30deg); and transform: matrix( skewX(30) ); do not give the same output.

css-transforms css html
1 Answers

The use of matrix is not as easy as you think. We don't add the angle but tangent of the angle:

.box {
  width: 100px;
  height: 100px;
  background-color: red;
  display: inline-block;
  transform: skew(30deg);
}

.box2 {
  transform: matrix(1, 0, .577, 1, 0, 0);
}
<div class="box"></div>
<div class="box box2"></div>

You can find more details in the specification: https://www.w3.org/TR/css-transforms-1/#interpolation-of-2d-matrices

You can also inspect the computed value of the element using skew(30deg) to see the matrix value:

matrix skew CSS

user_86203330
Related