CSS-transform：scale（），与元素大小无关

Question

是否有一种方法可以将transform: scale()应用于元素（或类似的东西，尽管理想情况下应该能够安全地进行动画处理），这会使元素看起来更大，但是“忽略”元素的大小（显然，这并不是我的意思，继续阅读）。

Here是我的意思的示例。

从本质上讲，想法是使2个不同大小的元素出现以相同的方式缩放，尽管它​​们是2个不同的大小。应该注意的是，元素的宽度不会固定，而是会继承其容器的大小（宽度也不确定）。

Answer 1

更新

感谢@TemaniAfif，可以通过操纵左右边距而不是宽度来进一步优化解决方案。

.small {
  width: 100px;
  margin: 10px;
  background-color: #1abc9c;
}

.large {
  width: 900px;
  margin: 10px;
  background-color: #3498db;
}

.target {
  background-color: inherit;
}

.target:hover {
  margin: 0 -12px;
  transform: scaleY(1.2);
  transition: transform 0.3s ease-in-out, margin 0.3s ease-in-out;
}

<div class="small">
  <div class="target">Small</div>
</div>
<div class="large">
  <div class="target">Large</div>
</div>

原始答案

scale函数通过乘法来调整元素的大小，但是您需要在变量x轴上不断放大。而是使用scale，在需要放大的元素上，在代理元素（.target）的宽度上使用calc来添加常量像素。通过扩大宽度，元素的位置也需要偏移才能使其向左增长，因此将left设置为负数，该负数是总放大倍数的一半。由于两个元素的高度相同，因此可以使用scaleY缩放它们。

.small {
  width: 100px;
  margin: 10px;
  background-color: #1abc9c;
}

.large {
  width: 900px;
  margin: 10px;
  background-color: #3498db;
}

.target {
  position: relative;
  left: 0;
  width: 100%;
  background-color: inherit;
}

.target:hover {
  left: -12px;
  width: calc(100% + 24px);
  transform: scaleY(1.2);
  transition: transform 0.3s ease-in-out, left 0.3s ease-in-out, width 0.3s ease-in-out;
}

<div class="small">
  <div class="target">Small</div>
</div>
<div class="large">
  <div class="target">Large</div>
</div>