CSS-transform:scale()，与元素大小无关

Question

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

这是我的意思的一个例子。

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

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>