如何让子元素不受父元素transform:matrix变换影响？

嘿，我完全懂你碰到的这个头疼问题——父元素加了matrix变换后，子元素跟着一起变形，哪怕设置了position:absolute或者fixed也没效果，手动反推matrix参数来重置又很难做到100%精准对齐，对吧？

给你两个实用的解决方案，优先推荐第一个，简单又靠谱：

方案一：把transform移到父元素的伪元素上 #

这个思路的核心是：让父元素本身不应用transform，把变换效果放到它的伪元素上，这样真正的子元素就不会受到任何变换影响了。具体步骤：

• 给父元素设置position: relative（如果还没设置的话），用来定位伪元素
• 将父元素原本的背景、宽高这类视觉样式，转移到伪元素上
• 把transform:matrix应用到伪元素，同时设置z-index: -1避免伪元素遮挡子元素

示例代码：

.parent {
  position: relative;
  width: 300px;
  height: 300px;
  /* 移除原来的transform，只保留布局相关样式 */
}

.parent::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #ccc; /* 原父元素的背景样式 */
  transform: matrix(0.98,-0.53,0.82,0.57,0,0);
  -ms-transform: matrix(0.98,-0.53,0.82,0.57,0,0);
  -webkit-transform: matrix(0.98,-0.53,0.82,0.57,0,0);
  z-index: -1; /* 确保伪元素在子元素下方 */
}

.child {
  position: absolute; /* 现在可以正常使用absolute/fixed，不受变换影响 */
  /* 子元素原有样式 */
}

方案二：用逆矩阵抵消父元素的变换 #

如果实在不想调整结构，你可以计算父元素transform的逆矩阵，给子元素应用这个逆变换来抵消父元素的影响。不过这个方法需要计算，而且可能因为浏览器浮点精度问题出现微小偏差。

假设父元素的matrix参数是 matrix(a,b,c,d,e,f)，逆矩阵的计算公式是：

det = a*d - b*c
逆矩阵参数：[d/det, -b/det, -c/det, a/det, (c*f - d*e)/det, (b*e - a*f)/det]

代入你给出的参数（a=0.98, b=-0.53, c=0.82, d=0.57, e=0, f=0），计算后子元素的transform应该是：

.child {
  /* 计算det=0.98*0.57 - (-0.53)*0.82 = 0.5586 + 0.4346 = 0.9932 */
  transform: matrix(0.57/0.9932, 0.53/0.9932, -0.82/0.9932, 0.98/0.9932, 0, 0);
  /* 简化后大概是 matrix(0.574, 0.534, -0.826, 0.987, 0, 0) */
}

为什么absolute/fixed没用？ #

这里要补充个知识点：当父元素设置了transform之后，它会成为新的包含块，哪怕子元素是fixed定位，也会相对于这个变换后的父元素来定位，而且transform的效果会作用于整个子树，所以子元素必然会跟着变形。

内容的提问来源于stack exchange，提问作者user3267302