Position absolute for a rotated Div

Question

I have a parent div and child div. Child is position absolute with respect to parent div. Child div is rotated by 90 degrees . Since the origin is the center (meeting point of 2 diagonals) of the child, the child div is shifted pixels outside of the container.

To elaborate this problem I have added 2 parents-child output in the fiddle below. http://jsfiddle.net/Xja29/

In the fiddle I have added an event which resets the child position to the top-left corner of their respective parents. Here is the reset code. Note top & left values are different for the 2 child divs

JQuery Code:

    $("#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?
    });

Exactly, I want to find out the relation between rotation angle, width, height and co-ordinate system of the child div. Please let me know if anything such exists. Thank you.

Answer 1

You can use as style:

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

to get the requested alignment without using Javascript

Answer 2

You can always use the following calculation:

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

Let's examine the formula for top . The center of the child div is (child_div.height/2) units below the top of the parent's div. After rotating the child div, its top is (child_div.width/2) units above its own center. This implies that its top is (child_div.width/2) - (child_div.width/2) units above its parent's top. Simplifying it, we get the aforesaid formula. The formula for left can be derived analogously.

If you are going to move them using Javascript, you can calculate these values at the run time and use them.

Answer 3

Well, the child div resides in its own coordinate system relative to the parent container which position' is not static (the body otherwise). If you want to rotate a div around a certain point, which is not the origin of its coordinate system the steps to be taken are as follows:

1. subtract the vetor of the rotation point from the position vector of the div. (so the rotation center will lie in the origin).

2. rotate the div.

3. undo step one by adding the "rotation-center-vector" to the position of the div.

These steps are a quite general approach and a common concept, just have a look at tranformation matrices. In other words, rotating arround a certain point always involves these three steps (the same holds true for scaling objects).

Good luck...