相对于屏幕而不是父变换移动对象

Question

我有两个对象 - 父母和孩子 父母有一些角度，例如：90度 孩子没有角度，但它也被旋转，因为它与它的父变换相关联。

现在我需要在x轴上移动子100px，在y轴上移动-200px， 但由于父母有角度，孩子向错误的方向移动。 实际上，它是相对于父变换的正确方向，但我需要将孩子相对于屏幕移动。

我需要数学方面的帮助......

HTML

<div id="parent">
    <div id="child"></div>
</div>

式

#parent { 
    background: red;
    position:   absolute; 
    left:       0px; 
    top:        0px; 
    width:      150px;
    height:     250px;
    -webkit-transform-origin: 75px 200px;
    -webkit-transform: translate(300px,160px) rotate(90deg);
    }

#child { 
    background: green;
    position:   absolute; 
    left:       0px; 
    top:        0px; 
    width:      90px;
    height:     120px;
    -webkit-transform-origin: 90px 20px;
    -webkit-transform: translate(100px,-200px);
    }

感谢

Answer 1

如您所见，旋转元素会旋转元素的参照系。

在上图中，紫色轴是红色矩形的参照系，是顺时针旋转θ后的绿色儿童。

您想要相对于屏幕移动绿色矩形（蓝色轴），即使用橙色矢量进行平移。

考虑到相对于屏幕轴的所需平移（x，y），您需要找到相对于紫轴的平移（xtranslate，ytranslate）。

使用图中x = 100的公式，y = -200得到xtranslate = -200，ytranslate = -100

另请注意，由于翻译是从当前位置移动一个量，因此转换原点没有区别。

因此，儿童代码变为

#child { 
    background: green;
    position:   absolute; 
    left:       0px; 
    top:        0px; 
    width:      90px;
    height:     120px;
    -webkit-transform: translate(-200px,-100px);
    }