css3旋转上下坐标答案

【问题标题】：css3 rotate top and left co-ordinatescss3旋转上下坐标
【发布时间】：2013-11-22 16:04:16
【问题描述】：

我有 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的高度中，那么就没有顶部和左侧位置的问题。我准备在这里做数学，但不知道要考虑什么。
当我拖动子div时，它的位置变为右上角。

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

【问题讨论】：

您是否尝试在旋转时始终将子项的左上角保持在父项的左上角？

标签： javascript jquery html css css-transforms

【解决方案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。希望对你有帮助

【讨论】：

谢谢。但是在你的小提琴中，我发现增加高度是行不通的。它在左侧开箱即用。

【解决方案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);

【讨论】：