使布局使用转换后的坐标 (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

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>

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

Make the layout use the transformed coordinate (CSS)

html

css

transformation

css-transforms