I have a 2 divs - parent and a child. Child is position:absolute

HTML:

<div id="parent">
    <div id="child">
        some text
    </div>
</div>

CSS

#parent {position:relative; border:1px solid #000; width:200px; height:100px}
#child {position:absolute; top:0; left:0; background-color:maroon; opacity:0.5; width:150px; height:50px; border:1px solid #000}

I have added few more elements in the jsfiddle to enable changing top and left co-ordinates.
/

The problems I am facing is -

1. When child div is rotated 90 or 270 degree then the element is not positioned to the top-left corner of parent div. The width/height of child div could be any. If the width of the child div could be acmodated in the height of the parent then there is no problem of top and left position. I am ready to do maths here but have no idea what to consider.

2. When I drag child div, its position is changed to the top right corner.

Please let me know if there is any help. Thank you a lot !!

I have a 2 divs - parent and a child. Child is position:absolute

HTML:

<div id="parent">
    <div id="child">
        some text
    </div>
</div>

CSS

#parent {position:relative; border:1px solid #000; width:200px; height:100px}
#child {position:absolute; top:0; left:0; background-color:maroon; opacity:0.5; width:150px; height:50px; border:1px solid #000}

I have added few more elements in the jsfiddle to enable changing top and left co-ordinates.
http://jsfiddle/zgvEC/1/

The problems I am facing is -

1. When child div is rotated 90 or 270 degree then the element is not positioned to the top-left corner of parent div. The width/height of child div could be any. If the width of the child div could be acmodated in the height of the parent then there is no problem of top and left position. I am ready to do maths here but have no idea what to consider.

2. When I drag child div, its position is changed to the top right corner.

Please let me know if there is any help. Thank you a lot !!

• javascript
• jquery
• html
• css
• css-transforms

Share Improve this question Follow asked Nov 22, 2013 at 5:48 AshwinAshwin 12.4k2222 gold badges8585 silver badges119119 bronze badges 1

• Are you trying to always keep the top left corner of the child in the top left corner of the parent when you rotate it? – Joshua Wilson Commented Nov 22, 2013 at 6:56

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 4

First you need to set the origin of rotation to top-left and the rotate,

$("#child").css({
            "-webkit-transform-origin": "top left",
            "-moz-transform-origin": "top left",
            "-o-transform-origin": "top left",
            "transform-origin": "top left",
            "transform" : "rotate("+ angle +"deg)"
        });

This will rotate the element around its (top, left) point.

But as you described in your case, you need the div to be always in top,left you need to do some math with bounds of the div.

you can get the bounds using document.getElementById(ele).getBoundingClientRect();

Then you need to get the bounds of the div before and after it was rotated. Apply the math logic based on the current angle. Find the code here for your reference.

$(function(){
    $("#child").draggable();
    var angle = 0;
    $("#btn1").click(function(){
        angle = angle + 90;
        if(angle == 360) { angle = 0 }
        // reset top left position to (0,0)
        $("#child").css({"top": "0px", "left": "0px"});
        var preBounds = getBounds("child");
        $("#child").css({
            "-webkit-transform-origin": "top left",
            "-moz-transform-origin": "top left",
            "-o-transform-origin": "top left",
            "transform-origin": "top left",
            "transform" : "rotate("+ angle +"deg)"
        });
        var currBounds = getBounds("child");

        if(angle == 90)
        {
         $("#child").css({ "left": currBounds.left+Number(preBounds.left-currBounds.left)+"px"});
        }
        else if(angle == 180)
        {
         $("#child").css({ "top": currBounds.top+Number(preBounds.top-currBounds.top)+"px","left":currBounds.width+"px"});
        }
        else if(angle == 270)
        {
         $("#child").css({ "top": currBounds.height+"px"});
        }
  });


});

function getBounds(ele){
    var bounds = document.getElementById(ele).getBoundingClientRect();
    console.log(bounds);
    //{left:bounds.left, top:bounds.top,  right:bounds.right, bottom:bounds.bottom}
    return bounds;
}

Check the fiddle of the same. Hope it helps

I have added some code to your jsfiddel.

Here's a working link: Fiddle

To get the right coordinates, you have to check the x and y offset of the child element:

top = $(this).css('top'); 
left = $(this).css('left');

but to get the positions right while rotating, you have to use the width and height of the element as well. So I set the top and left values like so:

top = parseInt($("#child").css('top').replace('px','')) + (middlePointX - middlePointY);
left = parseInt($("#child").css('left').replace('px','')) + (middlePointY - middlePointX);