Make the layout use the transformed coordinate (CSS)-CodePudding

Is there a way to make HTML/CSS to use the transformed coordinates in layout calculations? E.g. if I scale a div, I want the next div to automatically start on the scaled div's boundary.

body {
  padding:50px;
}

.a {
  width:100px;
  height:100px;
  background-color:red;
  transform:scale(1.2)
}

.b {
  width:100px;
  height:100px;
  background-color:blue;
}

<div >
  hello
</div>

<div >
  world
</div>

CodePudding user response：

Is there a way to make HTML/CSS to use the transformed coordinates in layout calculations?

Yes, that's what the transform property is for.

However, transform (like many other properties) only applies to an element and its descendants not its siblings. This is by-design. Furthermore, properties like transform (and opacity, and others) create a new stacking context which basically messes-up z-index ordering.

Anyway, to get what you want, you can use a different approach: as you're using a constant scale of 1.2 you can use that to calculate a positive bottom margin on .a to bump siblings down, like so:

body {
  padding:50px;
}

.a {
  width: 100px;
  height: 100px;
  background-color: red;
  transform: scale(1.2); /* i.e. 1.0   0.2 */
  margin-bottom: 10px; /* ( 0.2 * 100px ) / 2 // the divide-by-2 is because the scale is centered, so a 20% total scale results in a 10% scale at each end of the axis */
}

.b {
  width: 100px;
  height: 100px;
  background-color: blue;
}

  <div >
    hello
  </div>

  <div >
    world
  </div>