使布局使用转换后的坐标 (CSS)

Make the layout use the transformed coordinate (CSS)

有没有办法让 HTML/CSS 在布局计算中使用变换后的坐标?例如。如果我缩放 div,我希望下一个 div 自动从缩放后的 div 的边界开始。

body {
  padding:50px;
}

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

.b {
  width:100px;
  height:100px;
  background-color:blue;
}
<div class="a">
  hello
</div>

<div class="b">
  world
</div>

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

是的,这就是 transform 属性 的用途。

但是,transform(与许多其他属性一样)仅适用于元素及其后代 而非 其兄弟元素。这是by-design。此外,像 transform(和 opacity 等)这样的属性会创建一个新的 堆叠上下文 ,它基本上是 messes-up z-index 排序。

无论如何,为了得到你想要的,你可以使用不同的方法:当你使用 1.2 的恒定比例时,你可以使用它来计算 .a 上的正底部边距撞倒 兄弟姐妹,像这样:

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 class="a">
    hello
  </div>

  <div class="b">
    world
  </div>