Evenly distribute scaled items? - css

Question

How can I modify the styles below to result in the elements having the same spacing between each after the scaling? (without absolutely positioning them)
Desired Result:
.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

Use scale(x, y) and not 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>
With thatthere is an other problem : scalling text. But you can fix that with pseudo-element (like here)

Answer 2

The best way is to wrap the scaling items and apply the other ui properties seperately of items to that wrapping div and then apply the scaling to the item inside it only.
Here is your code with this theory applied and a little change of padding and margin for equal spacing:
.itemwrapper .menu-next, .itemwrapper .menu-previous1 {
transform: scale(.9); transform-origin: left;
}
.itemwrapper .menu-previous2 { transform: scale(.7); transform-origin: left;}
.itemwrapper .menu-previous3 { transform: scale(.55); transform-origin: left;}
.menu {
background-color: gray;
padding: 10px;
}
.itemwrapper{
display: block;
width: 20%;
padding: 5px 10px;
margin:2px;
background-color: white;
color: green;
}
<div class="menu">
<div class="itemwrapper"><div class="menu-previous3">Items</div></div>
<div class="itemwrapper"><div class="menu-previous2">Store</div></div>
<div class="itemwrapper"><div class="menu-previous1">Friends</div></div>
<div class="itemwrapper"><div class="menu-current" >Settings</div></div>
<div class="itemwrapper"><div class="menu-next" >Other</div></div>
</div>
Hope this helps.

Answer 3

May be you can adjust it by hand ... Not really a good solution, but it is difficult to go any better.
.menu-next,
.menu-previous1 {
transform: scale(.9);
}
.menu-previous2 {
transform: scale(.7);
margin-bottom: -6px;
}
.menu-previous3 {
transform: scale(.55);
margin-bottom: -12px;
}
.menu {
background-color: gray;
padding: 10px;
}
.menu div {
display: block;
width: 20%;
padding: 10px;
background-color: white;
color: green;
transform-origin: left;
}
<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 4

Based a bit off this answer and sort of hack-y: https://stackoverflow.com/a/16388428/1204415
Wrap your scaled divs, resize the wrappers, and move the scaled divs with negative margins within the wrappers. scale() seems to also scale borders, margins, and padding.
HTML
<div class="menu">
<div class="wrap1">
<div class="item menu-previous3">Items</div>
</div>
<div class="wrap2">
<div class="item menu-previous2">Store</div>
</div>
<div class="item menu-previous1">Friends</div>
<div class="item menu-current" >Settings</div>
<div class="item menu-next" >Other</div>
</div>
CSS
.wrap1 {
height: 20px;
margin: 0;
overflow: hidden;
background-color: black;
}
.wrap2 {
height: 32px;
margin: -5px 0 0 0;
overflow: hidden;
background-color: blue;
}
.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; margin: -8px 0 0 0; }
.menu {
background-color: gray;
padding: 10px;
}
.menu .item {
display: block;
outline:1px solid red;
width: 20%;
padding: 10px;
background-color: white;
color: green;
}
A pen: https://codepen.io/dmoz/pen/vmjybo