Html CSS无重叠缩放

我需要使用transform scale（1.3）缩放中间的div。它当然可以工作，但问题是在缩放之后，它与相邻的div重叠。仅仅使用CSS就可以消除重叠吗？ 这就是它现在的样子：

但我想这样

.main{
宽度：100%；
高度：500px；
背景颜色：灰色；
填充：100px；
}
.盒子{
宽度：100px；
高度：100px；
背景色：红色；
保证金：2倍；
显示：内联块；
边界：2px；
边框样式：实心；
边框颜色：黑色；
}
.缩放框{
宽度：100px；
高度：100px；
-webkit转换：规模（1.3）；
-moz变换：比例（1.3）；
转换：比例（1.3）；
显示：内联块；
背景颜色：绿色；
不透明度：0.7；
}

.main{
宽度：100%；
高度：500px；
背景颜色：灰色；
填充：100px；
--比例比率：1.5；/*您可以从此行更改比例*/
}
.盒子{
宽度：100px；
高度：100px；
背景色：红色；
显示：内联块；
边界：2px；
边框样式：实心；
边框颜色：黑色；
}
.盒子：第一个孩子{
右边距：计算（（100px*var（-scale rate））-100px）/2；/*100px是缩放框宽度*/
}
.盒子：最后一个孩子{
左边距：计算（（100px*var（-scale rate））-100px）/2；/*100px是缩放框宽度*/
}
.缩放框{
宽度：100px；
高度：100px；
-webkit转换：标度（var（--标度率））；
-moz变换：标度（var（--标度率））；
转换：标度（var（--标度率））；
显示：内联块；
背景颜色：绿色；
不透明度：0.7；
}

变换

属性不会反映到元素

宽度

或

高度

。也许您可以使用

缩放

。缺点是Firefox不支持它：

您可以在缩放框中添加边距以防止重叠

.scaled-box {
margin: 20px;
width: 100px;
height: 100px;
-webkit-transform: scale(1.3);
-moz-transform: scale(1.3);
transform: scale(1.3);
display: inline-block;
background-color: green;
opacity: 0.7;
}

在预览中，div也是垂直对齐的，因为它们是内联的，所以不能使用简单的边距。在主容器中使用flex将它们垂直对齐

.main {
display: flex;
align-items: center;
width: 100%;
height: 500px;
background-color: gray;
padding: 100px;
}

---

这回答了你的问题吗？