Question

我已阅读与查询this和this相关的问题。基于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>

我和“第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，并且它看起来与“步骤2或”步骤3“的输出看起来不相同。”我希望它能给我带来缩放，旋转和平移的组合变换。

我的要求：许多转换将由用户应用于div，最后我将允许将合并/最终轮换，缩放和翻译存储到用户。

请让我知道我在哪里做错了或者这是不可能的（计算合并值）。

Answer 1

指定transform matrix in HTML时，请输入以下代码：

12342015010198765hello
12342015010188765hello

对应于以下矩阵：

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

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

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

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

所以对于这个矩阵：

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

旋转角度为atan（0.45315389351832497 / 0.21130913087034978）= 65度。

从2d变换矩阵中提取旋转，缩放值（更多说明）

1 个答案: