如何位移一个旋转后的元素?

Question

我有两个元素,一个父元素,一个子元素.
父元素旋转了N度.
这时我要移动子元素的定位,它会相对父元素来进行移动.
我如何计算出偏移值.让它相对窗口定位来移动.
抱歉表述不清...画了个图:

图中文字应该是右移...抱歉,我已经傻到连左右都不分了...

Answer 1

    body{
      padding: 200px;
      margin: 0
    }
    .box,.box1{
      width: 150px;
      height: 150px;
    }
    .box2{
      position: absolute;
      left: 20px;
      width: 20px;
      top: 65px;
      height: 20px;
      background: #000;
      z-index: 2;
      transform: rotate(-45deg)translateX(32px)rotate(45deg);
    }
    .box1{
      transform: rotate(45deg);
      background: #ddd;   
    }
    
  <div class="box">
    <div class="box1">
      <div class="box2"></div>
    </div>
  </div>

Answer 2

你觉得你表达清楚了吗？

Answer 3

让子元素相反角度旋转就好了嘛
你情况如果允许 应该用父级来位移 子元素来旋转 这样产生的影响最小

Answer 4

有人说了一种思路就是将子元素反方选旋转相同角度，然后再位移。

我来提供另一种直男思路。

假设你旋转了n度，想要向右位移xpx，你可以这么写：

transform: translate(x*cos(n)px, -x*sin(n)px)

当然css很难满足你,虽然用sass可以模拟出sin,cos的效果.

比较简单的方式就是直接用js来写.