How to shift a rotated element?

I have two elements, a parent element and a child element.
the parent element rotates N degrees.
then I want to move the positioning of the child element, which moves relative to the parent element.
how do I calculate the offset value. Let it move relative to the window positioning.
Sorry I"m not clear. Draw a picture:

The text in the

picture should be moved to the right. I"m sorry, I"m so stupid that I don"t even know the difference between left and right.


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

do you think you have made yourself clear?


just let the child elements rotate at opposite angles
in your case, you should use the parent to shift the child elements to rotate. This will have the least impact


someone said that one idea is to rotate the child elements at the same angle, and then shift them.

Let me provide another straight man way of thinking.

suppose you rotate n degrees, and if you want to shift x px, to the right, you can write:

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

of course, css is difficult to satisfy you, although you can simulate the effect of sin,cos with sass.

A relatively simple way is to write directly in js.

Menu