通过CSS转换倾斜后，可应用于边距div的保证金 [英] Margin to apply to position div after skewing with CSS transform

问题描述

可能比CSS的数学更多，但是我试图确定一种在将CSS skewY变换应用于div之后调整div位置的方法.

Possibly more math than CSS, but I'm trying to determine a method for adjusting the positioning of a div after a CSS skewY transform has been applied to it.

在下面的代码段中，带有蓝色边框的div应用了3.5deg歪斜Y，我想知道是否存在一种数学方法来知道将多少top应用于蓝色div，以便不管两个div的宽度如何，右上角始终始终与div的右上角对齐并带有红色边框.

In the snippet below, the div with the blue border has a 3.5deg skewY applied, and I'd like to know if there is a mathematical way to know how much top to apply to the blue div so that the top right corner is always perfectly aligned to the top right corner of the div with the red border, regardless of the width of the two divs.

我曾经使用%和vw来处理数字，但是我正在寻找一种可靠的基于数学的解决方案.

I have played around with numbers using % and vw, but I'm looking for a solid math-based solution.

.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>

但是，如果您想玩数学，确切的公式是:

But if you want to play with math the exact formula is :

top = tan(Xdeg)*(width/2)

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

green is the top, purple is half the width and yellow is the angle of skew

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

In this case we have -3.5deg so the tan(-3.5deg) = -0.061 so top = -0.061 * 50% of width BUT since the reference of the div is top left when applying top property we need to consider a minus sign because we want to adjust the top right corner and not the top left one

.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的保证金的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！