可能比 CSS 更数学,但我正在尝试确定一种在应用 CSS skewY 变换后调整 div 位置的方法。
在下面的代码片段中,带有蓝色边框的 div 应用了 3.5deg skewY,我想知道是否有数学方法可以知道多少 top
应用到蓝色 div,这样无论两个 div 的宽度如何,右上角始终与带有红色边框的 div 的右上角完美对齐。
我已经使用 %
和 vw
玩弄数字,但我正在寻找基于数学的可靠解决方案。
.parent {
border: 1px solid red;
position: relative;
margin-top: 100px;
height: 200px;
}
.child {
border: 1px solid blue;
position: absolute;
width: 100%;
height: 100%;
transform: skewY(-3.5deg);
}
<div class="parent">
<div class="child">
content
</div>
</div>
最佳答案
不需要数学,只需调整transform-origin
:
.parent {
border: 1px solid red;
position: relative;
margin-top: 100px;
height: 200px;
}
.child {
border: 1px solid blue;
position: absolute;
width: 100%;
height: 100%;
transform: skewY(-3.5deg);
transform-origin:top right;
}
<div class="parent">
<div class="child">
content
</div>
</div>
但是如果你想玩数学,确切的公式是:
top = tan(Xdeg)*(width/2)
绿色是顶部
,紫色是一半宽度
,黄色是倾斜的 Angular
在这种情况下我们有 -3.5deg
所以 tan(-3.5deg) = -0.061
所以 top = -0.061 * 50% of width
但由于 div 的引用是左上角
,因此在应用 top 属性时我们需要考虑减号,因为我们想要调整 右上角
而不是左上
一个
.parent {
border: 1px solid red;
position: relative;
display:inline-block;
height: 100px;
width:var(--w); /*Used fixed width to make calculation easy*/
}
.child {
border: 1px solid blue;
position: absolute;
width: 100%;
height: 100%;
transform: skewY(-3.5deg);
top:calc(0.061 * (var(--w) / 2));
}
<div class="parent" style="--w:200px;">
<div class="child">
content
</div>
</div>
<div class="parent" style="--w:100px;">
<div class="child">
content
</div>
</div>
关于css - 在使用 CSS 变换倾斜后应用于位置 div 的边距,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/50700594/