如何让父元素执行transform/transition时子元素保持原尺寸

我通过transform和scale实现元素的尺寸变换，并添加transition做动画，但子元素会跟着父元素一起缩放。尝试对子元素做逆缩放（比如父元素横向scale(3)，子元素就scale(1/3)），但效果不理想，想找更好的方法让子元素保持原有尺寸。

复现代码 #

.transform-scale {
  width: max-content;
  margin: 40px auto;
  padding: 20px;
  transition: transform .5s;
  background-color: #eeeeee;
}

.transform-scale:hover {
  transform: scale(3, 1);
}

.transform-scale:hover .transform-scale-kid {
  transform: scale(calc(1 / 3), 1);
}

.transform-scale .transform-scale-kid {
  font-size: 30px;
  transition: transform .5s;
}

<div class="transform-scale">
  <div class="transform-scale-kid">hover</div>
</div>

解决方案 #

方案1：用width过渡替代scale（适合横向/纵向单一拉伸场景）

如果只是单纯的横向或纵向拉伸，直接修改父元素的width（或height）来实现动画，子元素不会被缩放，自然保持原尺寸：

.transform-scale {
  width: max-content;
  margin: 40px auto;
  padding: 20px;
  transition: width .5s;
  background-color: #eeeeee;
}

.transform-scale:hover {
  /* 按需求设置拉伸后的宽度，这里取原内容宽度的3倍 */
  width: calc(100% * 3);
}

.transform-scale .transform-scale-kid {
  font-size: 30px;
}

方案2：分离变换层与内容层（适合复杂变换场景）

如果需要更复杂的变换（如同时缩放+旋转+位移），可以把父元素的背景和变换逻辑放到伪元素中，让子元素独立于变换层：

.transform-scale {
  width: max-content;
  margin: 40px auto;
  padding: 20px;
  position: relative;
}

/* 伪元素负责背景和变换动画 */
.transform-scale::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #eeeeee;
  transition: transform .5s;
  z-index: -1;
  transform-origin: left center; /* 对齐原缩放原点 */
}

.transform-scale:hover::before {
  transform: scale(3, 1);
}

.transform-scale .transform-scale-kid {
  font-size: 30px;
  position: relative;
  z-index: 1; /* 确保内容在背景上方 */
}

为什么逆缩放效果不好？ #

父元素的scale和子元素的逆scale虽然数值上抵消，但两者的变换原点可能不一致，动画过程中会出现错位或视觉不协调；另外两次transform计算也会增加不必要的性能损耗，不如直接分离变换层或改用属性过渡更稳妥。

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