父元素应用了transform: perspective(10px)scale(1.1, 1.3) rotateX(5deg);transform-origin: bottom left;子元素如何不受变换影响

当父元素设置了 `transform` 包含 `perspective`, `scale`, 和 `rotateX` 变换，并且有 `transform-origin` 指定变形起始点时，要使子元素不受影响，你可以尝试以下方法：

1. **隔离变换**：对子元素使用相对定位 (`position: relative`)，然后在其上添加绝对定位 (`position: absolute`) 的 `div` 来放置内容。这会让子元素独立于父元素的变换。

<div class="parent">
  <div class="unaffected-child" style="position: relative;">
    <div class="child-content" style="position: absolute;"></div>
  </div>
</div>

CSS:

.parent {
  perspective: 10px;
  transform: scale(1.1, 1.3) rotateX(5deg);
  transform-origin: bottom left;
}

.unaffected-child {
  position: relative;
}

.child-content {
  position: absolute;
  top: 0;
  left: 0; /* 根据需求调整坐标 */
}

2. **固定子元素**：对于不需要跟随父元素变换的内容，可以使用 `transform: none;` 或者直接删除 `transform` 属性使其保持不变。

.child {
  transform: none; /* 或者不写 */
  // 其他样式...
}