旋轉Div絕對位置

我有一個父div和子div。孩子對父母div是絕對的。子div旋轉90 degrees。由於原點是孩子的中心（2對角線的交匯點），所以孩子div在容器外被移動像素。旋轉Div絕對位置

爲了詳細說明這個問題，我在下面的小提琴中增加了2個父母子輸出。 http://jsfiddle.net/Xja29/

在小提琴中，我添加了一個事件，將兒童位置重置爲其父母的左上角。這是重置代碼。注意頂部&左值是不同的2孩子的div

jQuery代碼：

$("#link").click(function(){ 

     //Child 1 needs top=45 and left=-45 
     $("#c1").css({"top":"45px", "left":"-45px"}); 

     //Whereas Child 2 needs top=30 and left=-30 
     $("#c2").css({"top":"25px", "left":"-25px"}); 

     //As one can see there are different values for top and left for childs of different dimension. Is there any relation or formula to find out this values? 
    });

沒錯，我想找出旋轉角度，寬度，高度和座標系之間的關係孩子div。請讓我知道是否有這樣的事情存在。謝謝。

來源

2013-11-25 Ashwin

的'top'和'left'樣式規則應用到子DIV，而不是原來的位置旋轉位置。因此，如果您先使用「top」和「left」值定位子div，然後旋轉它，則會得到完全相同的結果。如果您想要點擊您提供的鏈接後看到的結果，爲什麼不從一開始就創建它們？除非你向我們展示更多東西，否則我無法感謝你的努力。 – Chandranshu

您可以隨時使用以下的計算：

top = (child_div.width - child_div.height)/2 
left = (child_div.height - child_div.width)/2 = -top

讓我們來看看公式top。子div的中心是(child_div.height/2)單位低於父母的div的頂部。旋轉子div後，其頂部是自己中心以上的(child_div.width/2)單位。這意味着它的頂部是其父母上方的(child_div.width/2) - (child_div.width/2)單位。簡化它，我們得到上述公式。 left的公式可以類推導出。

如果您要使用Javascript移動它們，您可以在運行時計算這些值並使用它們。

來源

2013-11-25 08:08:11 Chandranshu

您的解決方案運行良好。非常感謝。 – Ashwin

那麼，子div駐留在它自己的座標系中相對於父容器的位置'不是靜態的（身體，否則）。如果你想繞某一點，這不是它的座標系的原點將要採取的步驟，一個div如下：

從的位置矢量減去旋轉點的縮放的矢量DIV。（所以旋轉中心將位於原點）。
旋轉div。
通過將「rotation-center-vector」添加到div的位置來撤銷第一步。

這些步驟是一個相當一般的方法和一個共同的概念，只是看看轉型矩陣。換句話說，圍繞特定點旋轉總是涉及這三個步驟（縮放對象也是如此）。

祝你好運...

來源

2013-11-25 08:08:46 philipp

您可以按風格使用：

transform: rotate(90deg) translate(0,-100%) 
transform-origin: top left

得到所要求的對齊，而不使用Javascript

來源

2013-11-25 08:16:03 6502

您的解決方案正在工作，但在我的項目中，我有許多子元素的各種縮放級別和尺寸。所以我不得不使用Chandranshu的解決方案。它也運作良好。 – Ashwin

旋轉Div絕對位置

回答

相關問題