css - 均匀分布缩放元素？

Question

如何修改下面的样式，使元素在缩放后具有相同的间距？ (没有绝对定位)

期望的结果:

.menu-next, .menu-previous1 {
	transform: scale(.9); transform-origin: left;
}

.menu-previous2 { transform: scale(.7); transform-origin: left;}

.menu-previous3 { transform: scale(.55); transform-origin: left;}

.menu {
background-color: gray;
padding: 10px;
}

.menu div {
  display: block;

  width: 20%;
  padding: 10px;
  background-color: white;
  color: green;
}

<div class="menu">
<div class="menu-previous3">Items</div>
<div class="menu-previous2">Store</div>
<div class="menu-previous1">Friends</div>
<div class="menu-current" >Settings</div>
<div class="menu-next" >Other</div>
</div>

Answer 1

使用 scale(x, y) 而不是 scale(value) + transform-origin

.menu-next,
.menu-previous1 {
  transform: scale(.9, 1);
  transform-origin: left;
}

.menu-previous2 {
  transform: scale(.7, 1);
  transform-origin: left;
}

.menu-previous3 {
  transform: scale(.55, 1);
  transform-origin: left;
}

.menu {
  display: flex;
  flex-direction: column;
  justify-content: center;
  background-color: gray;
  padding: 10px;
}

.menu div {
  display: block;
  width: 20%;
  padding: 10px;
  background-color: white;
  border: 1px solid green;
  color: green;
}

<div class="menu">
  <div class="menu-previous3">Items</div>
  <div class="menu-previous2">Store</div>
  <div class="menu-previous1">Friends</div>
  <div class="menu-current">Settings</div>
  <div class="menu-next">Other</div>
</div>

还有一个问题:缩放文本。但是您可以使用伪元素 ( like here ) 修复它