如何位移一個(gè)旋轉(zhuǎn)后的元素?

你覺得你表達(dá)清楚了嗎？

有人說了一種思路就是將子元素反方選旋轉(zhuǎn)相同角度，然后再位移。

我來提供另一種直男思路。

假設(shè)你旋轉(zhuǎn)了n度，想要向右位移xpx，你可以這么寫：

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

當(dāng)然css很難滿足你,雖然用sass可以模擬出sin,cos的效果.

比較簡(jiǎn)單的方式就是直接用js來寫.

讓子元素相反角度旋轉(zhuǎn)就好了嘛
你情況如果允許 應(yīng)該用父級(jí)來位移 子元素來旋轉(zhuǎn) 這樣產(chǎn)生的影響最小

    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>