使布局使用变换的坐标（CSS）

Question

有没有办法使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>

Answer 1

是否有一种方法可以使HTML/CSS在布局计算中使用转换的坐标？

是的，这就是变换属性的目的。

但是，变换（与许多其他属性一样）仅适用于元素及其后代而不是其兄弟姐妹。这是副设计。此外，诸如transform之类的属性（和obacity和其他）创建一个新的堆叠上下文，基本上弄乱了z- index订购。

无论如何，要获得想要的东西，您可以使用其他方法：当您使用1.2的恒定尺度时，您可以使用它来计算的正底部边距.a to bump 兄弟姐妹像这样：

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>