webkit-transform旋转后的框位置答案

【问题标题】：Box position after webkit-transform rotationwebkit-transform旋转后的框位置
【发布时间】：2010-07-07 14:40:41
【问题描述】：

有谁知道在使用 webkit-transform 进行旋转后如何获取显示的旋转框的左上角？

所以，例如，我画了一个盒子询问左上角，例如将盒子旋转 270 度，那么我如何查询“新”左上角的位置，在这种情况下有效原来的右下角……

我尝试使用 jQuery 来检查 offset().top 和 offset().left，但似乎 jQuery 足够聪明，知道容器已旋转，并且我回到了原来的左上角，我不想在这种情况下。

我想我可以跟踪旋转，然后总是要求正确的偏移量，但我认为如果可能的话，它会更健壮一些。

感谢您的帮助！

【问题讨论】：

标签： ipad safari webkit

【解决方案1】：

尝试将左上角作为一个点（原始不是边界框），然后是 transform-origin、width 和 height 以及 transform 样式属性。

要在 webkit 中获取元素的原始左上角，请使用此函数：

function getOffset(el){

        if(el.context!==undefined)
            el = el[0]; //remove the jquery wrapper if there is one

        var x = 0, y = 0;

        while(el && !isNaN(el.offsetLeft) && !isNaN(el.offsetTop)) {

            x+=el.offsetLeft;
            y+=el.offsetTop;
            el = el.offsetParent;
    }

    return {left:x,top:y};

}

如果变换原点是一个特定的量，例如50px 30px，那么您可以使用它作为左上角旋转的点。但是，如果是百分比，请使用宽度和高度来确定要旋转的点。 e.g. 20% 60px would be (width/5,60)

要获得元素的角度（如果你还不知道），你可以运行这个函数

function getRotation(el,returnType,recurse) {

        el = el.context!==undefined?el[0]:el;

        var styl = el.style,
            tran = styl.transform || styl.webkitTransform || styl.mozTransform || 'rotate(0deg)',
            rgx = tran.match(/\(([\d\.]+)\w/i),
            ang = parseFloat(rgx[1])||0,
            type = rgx[2]||"deg";

        recurse = (recurse===undefined?false:recurse);
        returnType = returnType || "deg";

        if(recurse && el.className.indexOf("limb-piece")!==-1)
            ang += getRotation(el.parentNode,returnType,recurse);

        if(returnType===type)
            return ang;
        else {

            if(type==="deg")
                return ang*(180/Math.PI);
            else
                return ang*(Math.PI/180);
        }

    }

取transform-origin并使用这个函数（p1是原点，使用[0,0]，p2是变换原点，然后角度是弧度的旋转

rotatePointAroundPoint : function(p1,p2,ang){

        var s = Math.sin(ang), c = Math.cos(ang),
            x = p1[0] - p2[0], y = p1[1] - p2[1],

            rx = x * c - y * s,
            ry = x * s + y * c,

            ret = [rx+p2[0],ry+p2[1]];

        return ret;

    }

然后将结果添加到从原始计算的左上角，你应该有左上角的任意角度的位置。

【讨论】：