Question

我有2个div - 父母和孩子。孩子是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}

我在jsfiddle中添加了更多元素，以便更改顶部和左侧坐标 http://jsfiddle.net/zgvEC/1/

我面临的问题是 -

当子div旋转90度或270度时，元素不会位于父div的左上角。子div的宽度/高度可以是任意的。如果子div的宽度可以容纳在父级的高度，则不存在顶部和左侧位置的问题。我准备在这里做数学，但不知道该考虑什么。
当我拖动子div时，其位置会更改为右上角。

如果有任何帮助，请告诉我。非常感谢!!

Answer 1

首先，您需要将旋转原点设置为左上角和旋转，

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

这将围绕其（顶部，左侧）点旋转元素。

但正如你在案例中描述的那样，你需要div总是在顶部，你需要用div的边界做一些数学运算。

您可以使用document.getElementById(ele).getBoundingClientRect();

获取界限

然后你需要在旋转之前和之后获得div的边界。根据当前角度应用数学逻辑。在此处找到代码供您参考。

$(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;
}

检查相同的fiddle。希望它有所帮助

Answer 2

我已经为你的jsfiddel添加了一些代码。

这是一个有用的链接：Fiddle

要获得正确的坐标，您必须检查子元素的x和y偏移量：

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

但要在旋转时获得正确的位置，您还必须使用元素的宽度和高度。所以我设置了这样的顶部和左边的值：

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

css3旋转顶部和左侧坐标

2 个答案: