extract rotation, scale values from 2d transformation matrix (more clarification)

Question

I have read the questions related to my query this and this. Based on the answer I have calculated the scale, rotation and translation. Some mistake certainly I have done that's why I could not get the correct values. Here are my detailed steps:

Step 1: Here is my initial div in brown color with four different colors corners for which I'll apply transformation whereas origin is 0,0

<body>
  <div id="viewport" style="left:100px;top:50px;position:relative;">
    <div id="maptiles" style="
  position:absolute; left:0px;top:0px;
  width:500px; height: 500px; border:2px solid #BF9212;
  transform-origin:0px 0px;
  ">
      <div style="position: absolute; left: 100px; top: 100px; width: 300px; height: 300px; border: 1px solid #BF9212;"></div>
      <div style="position: absolute; left:0px; top: 0px; width: 100px; height: 100px; border: 2px solid red;"></div>
      <div style="position: absolute; left:400px; top: 0px; width: 100px; height: 100px; border: 2px solid green;"></div>
      <div style="position: absolute; left:0px; top: 400px; width: 100px; height: 100px; border: 2px solid pink;"></div>
      <div style="position: absolute; left:400px; top: 400px; width: 100px; height: 100px; border: 2px solid blue;"></div>
    </div>
    <!-- just cartision lines as base-->
    <svg width="500" height="500" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
      <rect x="0" y="0" height="500" width="500" style="stroke:gray; fill: none;stroke-width:5px">
      </rect>
      <line x1="0" y1="100" x2="500" y2="100" style="stroke:gray" />
      <line x1="0" y1="200" x2="500" y2="200" style="stroke:gray" />
      <line x1="0" y1="300" x2="500" y2="300" style="stroke:gray" />
      <line x1="0" y1="400" x2="500" y2="400" style="stroke:gray" />
      <line x1="100" y1="0" x2="100" y2="500" style="stroke:gray" />
      <line x1="200" y1="0" x2="200" y2="500" style="stroke:gray" />
      <line x1="300" y1="0" x2="300" y2="500" style="stroke:gray" />
      <line x1="400" y1="0" x2="400" y2="500" style="stroke:gray" />
    </svg>
</body>

Step 2: Next I apply different transformations:

transform:translate(250px, 250px) rotate(45deg) translate(-250px, -250px) translate(38px, 250px) rotate(20deg) translate(-38px, -250px) scale(.5)

<body>
<div id="viewport" style="left:100px;top:50px;position:relative;">
<div id="maptiles"
  style="position:absolute; left:0px;top:0px;
  width:500px; height: 500px; border:2px solid #BF9212;
  transform-origin:0px 0px;
  transform:translate(250px, 250px) rotate(45deg) translate(-250px, -250px) translate(38px, 250px) rotate(20deg) translate(-38px, -250px) scale(.5);  
  ">
     <div style="position: absolute; left: 100px; top: 100px; width: 300px; height: 300px; border: 1px solid #BF9212;"></div>
     <div style="position: absolute; left:0px; top: 0px; width: 100px; height: 100px; border: 2px solid red;"></div>
     <div style="position: absolute; left:400px; top: 0px; width: 100px; height: 100px; border: 2px solid green;"></div>
     <div style="position: absolute; left:0px; top: 400px; width: 100px; height: 100px; border: 2px solid pink;"></div>
     <div style="position: absolute; left:400px; top: 400px; width: 100px; height: 100px; border: 2px solid blue;"></div>
 
 </div>
  <!-- just cartision lines as base-->
<svg width="500" height="500"
  xmlns="http://www.w3.org/2000/svg"
  xmlns:xlink="http://www.w3.org/1999/xlink">
  <rect x="0" y="0" height="500" width="500" style="stroke:gray; fill: none;stroke-width:5px" >
  </rect>
  <line x1="0"  y1="100" x2="500"   y2="100" style="stroke:gray"/>
  <line x1="0"  y1="200" x2="500"   y2="200" style="stroke:gray"/>
  <line x1="0"  y1="300" x2="500"   y2="300" style="stroke:gray"/>
  <line x1="0"  y1="400" x2="500"   y2="400" style="stroke:gray"/>
  <line x1="100"  y1="0" x2="100"   y2="500" style="stroke:gray"/>
  <line x1="200"  y1="0" x2="200"   y2="500" style="stroke:gray"/>
  <line x1="300"  y1="0" x2="300"   y2="500" style="stroke:gray"/>
  <line x1="400"  y1="0" x2="400"   y2="500" style="stroke:gray"/>
</svg>
</body>

Step 3: Now I calculate the matrix transformation for all above transformations and apply to the original div:

transform: matrix(0.21130913087034978,0.45315389351832497,-0.45315389351832497,0.21130913087034978,310.61081520146786,-40.000898954115684)

<body>
<div id="viewport" style="left:100px;top:50px;position:relative;">
<div id="maptiles"
  style="position:absolute; left:0px;top:0px;
  width:500px; height: 500px; border:2px solid #BF9212;
  transform-origin:0px 0px;
  transform: matrix(0.21130913087034978,0.45315389351832497,-0.45315389351832497,0.21130913087034978,310.61081520146786,-40.000898954115684);
  ">
     <div style="position: absolute; left: 100px; top: 100px; width: 300px; height: 300px; border: 1px solid #BF9212;"></div>
     <div style="position: absolute; left:0px; top: 0px; width: 100px; height: 100px; border: 2px solid red;"></div>
     <div style="position: absolute; left:400px; top: 0px; width: 100px; height: 100px; border: 2px solid green;"></div>
     <div style="position: absolute; left:0px; top: 400px; width: 100px; height: 100px; border: 2px solid pink;"></div>
     <div style="position: absolute; left:400px; top: 400px; width: 100px; height: 100px; border: 2px solid blue;"></div>
  </div>
  <!-- just cartision lines as base-->
<svg width="500" height="500"
  xmlns="http://www.w3.org/2000/svg"
  xmlns:xlink="http://www.w3.org/1999/xlink">
  <rect x="0" y="0" height="500" width="500" style="stroke:gray; fill: none;stroke-width:5px" >
  </rect>
  <line x1="0"  y1="100" x2="500"   y2="100" style="stroke:gray"/>
  <line x1="0"  y1="200" x2="500"   y2="200" style="stroke:gray"/>
  <line x1="0"  y1="300" x2="500"   y2="300" style="stroke:gray"/>
  <line x1="0"  y1="400" x2="500"   y2="400" style="stroke:gray"/>
  <line x1="100"  y1="0" x2="100"   y2="500" style="stroke:gray"/>
  <line x1="200"  y1="0" x2="200"   y2="500" style="stroke:gray"/>
  <line x1="300"  y1="0" x2="300"   y2="500" style="stroke:gray"/>
  <line x1="400"  y1="0" x2="400"   y2="500" style="stroke:gray"/>
</svg>
</body>

and I get the same out put as in "step 2"

I am using transformatrix module to calculate the transformation matrix.

step 4: Finally I calculate the scale, rotation and translation based on the answer .
```
transform: rotate(-25deg) scale(0.5) translate(310.611px,-40px)
```

<body>
<div id="viewport" style="left:100px;top:50px;position:relative;">
<div id="maptiles"
  style="position:absolute; left:0px;top:0px;
  width:500px; height: 500px; border:2px solid #BF9212;
  transform-origin:0px 0px;
  transform: rotate(-25deg) scale(0.5) translate(310.611px,-40px);
  ">
     <div style="position: absolute; left: 100px; top: 100px; width: 300px; height: 300px; border: 1px solid #BF9212;"></div>
     <div style="position: absolute; left:0px; top: 0px; width: 100px; height: 100px; border: 2px solid red;"></div>
     <div style="position: absolute; left:400px; top: 0px; width: 100px; height: 100px; border: 2px solid green;"></div>
     <div style="position: absolute; left:0px; top: 400px; width: 100px; height: 100px; border: 2px solid pink;"></div>
     <div style="position: absolute; left:400px; top: 400px; width: 100px; height: 100px; border: 2px solid blue;"></div>
  
  </div>
  <!-- just cartision lines as base-->
<svg width="500" height="500"
  xmlns="http://www.w3.org/2000/svg"
  xmlns:xlink="http://www.w3.org/1999/xlink">
  <rect x="0" y="0" height="500" width="500" style="stroke:gray; fill: none;stroke-width:5px" >
  </rect>
  <line x1="0"  y1="100" x2="500"   y2="100" style="stroke:gray"/>
  <line x1="0"  y1="200" x2="500"   y2="200" style="stroke:gray"/>
  <line x1="0"  y1="300" x2="500"   y2="300" style="stroke:gray"/>
  <line x1="0"  y1="400" x2="500"   y2="400" style="stroke:gray"/>
  <line x1="100"  y1="0" x2="100"   y2="500" style="stroke:gray"/>
  <line x1="200"  y1="0" x2="200"   y2="500" style="stroke:gray"/>
  <line x1="300"  y1="0" x2="300"   y2="500" style="stroke:gray"/>
  <line x1="400"  y1="0" x2="400"   y2="500" style="stroke:gray"/>
</svg>
</body>

And apply these transformations to the original div and it does not look alike the output of "step 2 or "step 3". I was expecting it would give me the combined transformations in scale, rotation and translation.

My requirement: Many transformations would be applied on the div by user and at the end I would allow to store the combined/final rotation, scale and translation to user.

Please let me know where am I doing wrong or is this not possible (to calculate the combined values).

samgak samgak · Accepted Answer · 2015-07-10T05:28:07

When specifying a transform matrix in HTML, the following code:

transform: matrix(a, b, c, d, tx, ty);

corresponds to the following matrix:

| a c tx |    
| b d ty |
| 0 0 1  |

Notice that c and b are swapped compared to the answers you linked.

Alternatively you could swap b and c in the matrix and think of the HTML code as:

transform: matrix(a, c, b, d, tx, ty);

So for this matrix:

transform: matrix(0.21130913087034978,0.45315389351832497,-0.45315389351832497,0.21130913087034978,310.61081520146786,-40.000898954115684)

the rotation angle is atan(0.45315389351832497/0.21130913087034978) = 65 degrees.

extract rotation, scale values from 2d transformation matrix (more clarification)

1 Answers