Поля для применения к позиции div после перекоса с помощью CSS-преобразования - PullRequest
Новая
       7

Поля для применения к позиции div после перекоса с помощью CSS-преобразования

0 голосов
/ 05 июня 2018

Возможно, больше математики, чем CSS, но я пытаюсь определить метод для настройки позиционирования div после преобразования CSS skewY к нему.

В приведенном ниже фрагменте div ск синей рамке применен угол наклона 3,5 градуса, и я хотел бы знать, есть ли математический способ узнать, сколько 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>

1 Ответ

0 голосов
/ 05 июня 2018

Нет необходимости в математике, просто настройте 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)

enter image description here

зеленый - это top, фиолетовый - half the width, а желтый - the angle с перекосом

В этом случае у нас есть -3.5deg, поэтому tan(-3.5deg) = -0.061так что top = -0.061 * 50% of width НО, так как ссылка на div равна top left при применении свойства top, нам нужно учитывать знак минус, потому что мы хотим настроить угол top right, а не 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>
...