移動對象相對於屏幕而不是父變換

我有兩個對象 - 父母和子女父母有一定的角度，例如：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); 
    }

感謝

來源

2014-04-17 user1732451

你怎麼樣的轉變，CSS，畫布，SVG？請顯示您用於轉換的代碼。 – jing3142

轉換是在CSS中，我只是用代碼示例更新了我的問題，謝謝 – user1732451

正如你所看到的旋轉元素旋轉的參照系元素。

enter image description here

在上述圖中的紫色軸的旋轉THETA順時針後紅色矩形和綠色子參考幀。

您想要相對於屏幕（藍色軸）移動綠色矩形，即使用橙色向量進行翻譯。

鑑於需要翻譯（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); 
    }

來源

2014-04-19 13:23:12 jing3142

移動對象相對於屏幕而不是父變換

回答

相關問題