如何将元素追加到旋转定位元素上并保持屏幕位置不变？

问题场景 #

现有如下HTML结构：

<body>
<button onclick="appendBlueToGreen()">Append To Green</button>
  <div id="red" style="transform: rotate(20deg); width: 100px; height: 100px; position: absolute; top: 50px; left: 50px; background-color: red;">
    <div id="green" style="transform: rotate(20deg); width: 80px; height: 80px; position: absolute; top: 13px; left: 11px; background-color: green;">
    </div>
  </div>
  <div id="blue" style="transform: rotate(45deg); width: 50px; height: 50px; position: absolute; top: 29px; left: 313px; background-color: blue;"></div>
</body>

需要将#blue元素挂载为#green的子元素，但挂载前后#blue在屏幕上的视觉位置、旋转角度必须完全一致，不受#green、#red的旋转和定位影响。

核心思路 #

要实现该需求，需利用浏览器原生的变换矩阵API，通过逆变换抵消父元素链的累积变换影响：

1. 获取#blue相对于文档的全局变换矩阵（包含所有位置、旋转等变换）
2. 获取#green相对于文档的全局变换矩阵，计算其逆矩阵
3. 用#blue的全局矩阵乘以#green的逆矩阵，得到作为子元素时所需的变换矩阵
4. 应用新矩阵并完成挂载，确保视觉效果不变

实现代码 #

function appendBlueToGreen() {
  const blue = document.getElementById('blue');
  const green = document.getElementById('green');
  
  // 获取元素相对于文档的全局变换矩阵
  const getGlobalMatrix = (element) => {
    const computedStyle = window.getComputedStyle(element);
    const transform = computedStyle.transform;
    return transform === 'none' 
      ? new DOMMatrix([1, 0, 0, 1, 0, 0]) 
      : new DOMMatrix(transform);
  };
  
  // 获取全局变换矩阵
  const blueGlobalMatrix = getGlobalMatrix(blue);
  const greenGlobalMatrix = getGlobalMatrix(green);
  
  // 计算green矩阵的逆矩阵，抵消其父元素链的变换影响
  const greenInverseMatrix = greenGlobalMatrix.invertSelf();
  
  // 计算blue作为green子元素时的目标变换矩阵
  const targetBlueMatrix = greenInverseMatrix.multiply(blueGlobalMatrix);
  
  // 应用变换并重置定位属性
  blue.style.transform = targetBlueMatrix.toString();
  blue.style.position = 'absolute';
  blue.style.top = '0';
  blue.style.left = '0';
  
  // 完成挂载
  green.appendChild(blue);
}

代码说明 #

• getGlobalMatrix：通过getComputedStyle获取元素最终生效的变换矩阵，DOMMatrix是浏览器原生API，能直接处理矩阵的逆运算、乘法等操作，比手动计算旋转角度和位移更精准。
• 逆矩阵的作用：完全抵消#green及其父元素#red的所有变换（旋转、位移），让#blue的全局视觉效果与挂载前完全一致。
• 重置top/left：因为变换矩阵已经包含了位移信息，无需再通过定位属性控制位置，避免双重偏移。

内容的提问来源于stack exchange，提问作者cyrus-d