Html CSS：为什么transform:scale不能与justify content:space一起使用？

我只制作CSS旋转木马，并尝试如下所示的效果

1） 活动元素具有较大的比例/不透明度值。
2） 远离活动元素时，比例/不透明度变小

.carousel{
显示器：flex；
最小高度：100vh；
证明内容：周围的空间；
对齐项目：居中；
}
.旋转木马{
宽度：150px；
高度：500px；
背景：天蓝色；
}
.传送带盒：第n个孩子（1），
.传送带盒：第n个孩子（5）{
不透明度：0.6；
变换：比例（0.8）；
}
.传送带盒：第n个孩子（2），
.传送带盒：第n个孩子（4）{
不透明度：0.8；
}
.传送带盒：第n个孩子（3）{
转换：比例（1.2）；
}

---

考虑余量以纠正比例效应：

.carousel{
显示器：flex；
最小高度：100vh；
证明内容：周围的空间；
对齐项目：居中；
}
.旋转木马{
宽度：150px；
高度：500px；
背景：天蓝色；
}
.传送带盒：第n个孩子（1），
.传送带盒：第n个孩子（5）{
不透明度：0.6；
变换：比例（0.8）；
边距：0-15px；/*您按0.8缩放，因此-0.2x150px=-30px，我们在两侧拆分*/
}
.传送带盒：第n个孩子（2），
.传送带盒：第n个孩子（4）{
不透明度：0.8；
}
.传送带盒：第n个孩子（3）{
转换：比例（1.2）；
边距：0 15px；/*您按1.2进行缩放，因此0.2x150px=30px，我们在两侧拆分*/
}
身体{
保证金：0；
}

Scaled（使用

变换：scale

）元素的行为类似于

绝对值

，它的大小变化不会影响其他DOM元素。改用

宽度

和

高度

.carousel{
显示器：flex；
最小高度：100vh；
证明内容：周围的空间；
对齐项目：居中；
}
.旋转木马{
--w:100px；
--h:100px；
宽度：var（--w）；
高度：var（--h）；
背景：天蓝色；
}
.传送带盒：第n个孩子（1），
.传送带盒：第n个孩子（5）{
不透明度：0.6；
宽度：计算值（var（--w）/1.2）；
高度：计算值（var（--h）/1.2）；
}
.传送带盒：第n个孩子（2），
.传送带盒：第n个孩子（4）{
不透明度：0.8；
}
.传送带盒：第n个孩子（3）{
宽度：计算值（var（--w）*1.2）；
高度：计算值（var（--h）*1.2）；
}

scale只是一种视觉效果，会影响布局，因此在定义空间后会缩放元素。这主意不错，但我更喜欢宽度/高度，无论如何，谢谢！谢谢，我使用宽度/高度作为变量！