使布局使用转换后的坐标 (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>
有没有办法让 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>