Evenly distribute scaled items?

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>

What about using relative units like "em"s to get the scaling done? Check out this [jsfiddle](https://jsfiddle.net/xcfffj0q/) — trav, May 12 '17 at 17:47

score 0 · Answer 1 · edited May 23 '17 at 10:31

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)

score 0 · Answer 2 · answered May 12 '17 at 17:53

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.

score 0 · Answer 3 · answered May 12 '17 at 17:54

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>

score 0 · Answer 4 · edited May 23 '17 at 12:10

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

Evenly distribute scaled items?

4 Answers4