在使用 CSS 变换倾斜后应用于位置 div 的保证金

Question

可能比 CSS 更数学，但我正在尝试确定一种在应用 CSS skewY 变换后调整 div 定位的方法。

在下面的代码片段中，带有蓝色边框的 div 应用了 3.5 度的 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>

Answer 1

不需要数学，只需调整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)

绿色是 top，紫色是 half the width，黄色是 the angle 的偏斜

在这种情况下，我们有 -3.5deg 所以 tan(-3.5deg) = -0.061 所以 top = -0.061 * 50% of width 但是因为在应用 top [= 时 div 的引用是 top left 51=] 我们需要考虑减号，因为我们要调整 top right 角而不是 top left 角

.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 变换倾斜后应用于位置 div 的保证金

Margin to apply to position div after skewing with CSS transform

css

math

css-transforms