The situation I am facing involves a parent div and child div. The child div is positioned absolutely with respect to the parent div and has been rotated by an angle of 90 degrees. Due to the fact that the origin is located at the center of the child div (where the two diagonals meet), the child div appears to be shifted outside the container.
To provide further clarification on this issue, I have included two sets of parent-child outputs in the fiddle link provided below. Fiddle Link
Within the fiddle, there is an event added which resets the position of the child elements to the top-left corner of their respective parents. Here is the code snippet for resetting:
JQuery Code:
$("#link").click(function(){
//Child 1 requires top=45 and left=-45
$("#c1").css({"top":"45px", "left":"-45px"});
//However, Child 2 needs top=30 and left=-30
$("#c2").css({"top":"25px", "left":"-25px"});
//As shown above, different values are assigned to top and left positions for child divs of varying dimensions. Is there a specific relation or formula to determine these values?
});
I am seeking to understand the relationship between the rotation angle, width, height, and coordinate system of the child div. If such information exists, kindly share it with me. Thank you.