从 2d 变换矩阵中提取旋转、比例值（更多说明）

Question

我已经阅读了与我的查询相关的问题this and this. Based on the answer我已经计算了比例、旋转和平移。我肯定犯了一些错误，这就是为什么我无法获得正确的值。以下是我的详细步骤：

第 1 步： 这是我最初的 div 棕色，有四个不同颜色的角，我将对其应用变换，而原点是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>

第 2 步： 接下来我应用不同的转换：

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>

步骤 3: 现在我计算上述所有变换的矩阵变换并应用到原始 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>

我得到了与 "step 2"

相同的输出

我正在使用 transformatrix 模块来计算转换矩阵。

第 4 步： 最后我根据 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>

并将这些转换应用于原始 div，它看起来不像 "step 2 or "步骤 3 的输出。我期待它会给我在缩放、旋转和翻译.

我的要求： 用户将在 div 上应用许多转换，最后我将允许存储 combined/final 旋转、缩放并翻译给用户。

请告诉我我哪里做错了或者这不可能（计算组合值）。

Answer 1

当指定一个transform matrix in HTML时，如下代码：

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

对应如下矩阵：

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

请注意，与您链接的答案相比，c 和 b 被交换了。

或者您可以交换矩阵中的 b 和 c，然后将 HTML 代码视为：

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

所以对于这个矩阵：

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

旋转角度为atan(0.45315389351832497/0.21130913087034978) = 65度。

从 2d 变换矩阵中提取旋转、比例值（更多说明）

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

math

transformation

matrix