旋轉Div的絕對位置

Question

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

為了闡述這個問題，我在下面的小提琴中添加了2個parent-child輸出。 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的旋轉角度，寬度，高度和坐標系之間的關系。 請讓我知道是否存在任何此類情況。 謝謝。

Answer 1

您可以將其用作樣式：

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

在不使用Javascript的情況下獲得請求的對齊方式

Answer 2

您始終可以使用以下計算：

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

讓我們檢查top的公式。 子div的中心比父div的頂部下方(child_div.height/2)單位。 旋轉子div后，其頂部位於其中心上方(child_div.width/2)單位。 這意味着其頂部比(child_div.width/2) - (child_div.width/2)頂部高(child_div.width/2) - (child_div.width/2)單位。 簡化它，我們得到上述公式。 left公式可以類似地得出。

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

Answer 3

好吧，子div相對於父容器位於其自身的坐標系中，該位置的位置不是靜態的（否則為主體）。 如果要圍繞某個點（不是其坐標系的原點）旋轉div，請執行以下步驟：

1. 從div的位置向量中減去旋轉點的向量。 （因此旋轉中心將位於原點）。

2. 旋轉div。

3. 通過將“旋轉中心矢量”添加到div的位置來撤消第一步。

這些步驟是一個非常通用的方法和一個通用概念，只看一下轉換矩陣即可。 換句話說，圍繞某個特定點旋轉總是涉及這三個步驟（對於縮放對象也是如此）。

祝好運...