Javascript css3旋转顶部和左侧坐标

我有两个孩子——父母和一个孩子。子项为

位置：绝对

HTML:

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

我在JSFIDLE中添加了几个元素，以允许更改顶部和左侧坐标。

我面临的问题是-

当子div旋转90度或270度时，元素不会定位到父div的左上角。子div的宽度/高度可以是任意值。如果子div的宽度可以调整为父div的高度，那么顶部和左侧位置就没有问题。我准备在这里做数学，但不知道要考虑什么。<

当我拖动子div时，其位置将更改为右上角

---

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

我已经为您的JSFIDEL添加了一些代码

这里有一个工作链接：

要获得正确的坐标，必须检查子元素的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);

---

我已经为您的JSFIDEL添加了一些代码

这里有一个工作链接：

要获得正确的坐标，必须检查子元素的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);

---

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

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

请检查相同的。希望有帮助
首先，您需要将旋转原点设置为左上角，然后旋转

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

请检查相同的。希望有帮助
旋转时，您是否试图始终将孩子的左上角保持在家长的左上角？旋转时，您是否试图始终将孩子的左上角保持在家长的左上角？谢谢。但在你的小提琴里，我发现增加高度是行不通的。它在盒子的左边，谢谢。但在你的小提琴里，我发现增加高度是行不通的。它从盒子里走到左边。