Margin to apply to position div after skewing with CSS transform

前端 未结 1 1131
没有蜡笔的小新
没有蜡笔的小新 2021-01-13 19:00

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.

In the

相关标签:
1条回答
  • 2021-01-13 19:42

    No need math, simply adjust 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)
    

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

    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>

    0 讨论(0)
提交回复
热议问题