hover触发容器scaleY拉伸时内部图片同步变形如何修复

问题原因 #

父元素li设置的transform: scaleY()会作用于所有后代元素，因此内部的图片会被同步纵向拉伸，出现变形。由于transform属性不会改变元素在文档流中的实际占位，不会挤压相邻卡片，原本的用法逻辑成立，只需要调整结构让内容不受父元素缩放影响即可。

方案1：用伪元素承载拉伸效果（推荐，无换算误差） #

该方案把需要拉伸的背景、边框都交给独立的伪元素实现，实际内容不受缩放影响，完全不会变形，也不会改变原有布局占位。
修改后的CSS代码：

* {
  margin: 0;
}
li {
  list-style: none;
}
#card {
  width: 460px;
  height: 350px;
  left: 50%;
  transform: translate(-50%);
  position: absolute;
}
#socialLinks {
  display: inline-flex;
  padding: 0;
}
/* li仅作为定位和内容容器，不设置背景、边框 */
#socialLinks li {
  position: relative;
  width: 152px;
  height: 100px;
  transition-timing-function: ease-in-out;
  transition-duration: 0.3s;
}
/* 伪元素承载背景、边框和拉伸效果 */
#socialLinks li::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 1px solid rgb(43, 43, 43);
  background: tomato;
  transition: inherit;
  transform-origin: bottom;
  transform: scaleY(1);
  z-index: -1; /* 伪元素放在内容下层 */
}
/* 悬停仅缩放伪元素 */
#socialLinks li:hover::before {
  transform: scaleY(1.1);
}
.logoReddit {
  width: 85px;
  height: 75px;
}

HTML代码无需任何修改，完全兼容原有结构。

方案2：子元素添加反向缩放抵消变形 #

如果不想调整伪元素结构，也可以给内部logo设置反向的scaleY，抵消父元素的拉伸效果，比例为父元素缩放比例的倒数即可。
仅需要新增以下CSS：

#socialLinks li:hover .logoReddit {
  transform-origin: bottom;
  transform: scaleY(calc(1 / 1.1)); /* 约等于0.909，刚好抵消父元素1.1倍的纵向拉伸 */
  transition: inherit;
}

该方案改动量极小，但如果后续调整父元素缩放比例，需要同步修改子元素的反向比例，维护成本略高。

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