Ipad webkit变换旋转后的框位置

有人知道如何在使用webkit transform旋转后获得旋转框的左上角显示吗

例如，我画了一个长方体，询问左上角，例如将长方体旋转270度，然后如何查询“新的”左上角的位置，在本例中，它实际上是原始的右下角

我曾尝试使用jQuery检查offset（）.top和offset（）.left，但jQuery似乎足够聪明，可以知道容器是旋转的，我得到了原来的左上角，在本例中我不希望看到它

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

---

谢谢你的帮助

尝试抓住左上角作为点（原始非边界框），然后是

变换原点

、

宽度

和

高度

以及

变换

样式属性

要获取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

，则可以将其用作向右旋转左上角的点。但是，如果它是一个百分比，请使用宽度和高度来计算旋转所依据的点<代码>例如，20%60px为（宽度/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);
        }

    }

取

变换原点

并使用此函数（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;

    }

---

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

尝试抓住左上角作为点（原始非边界框），然后是

变换原点

，

宽度

和

高度

以及

变换

样式属性

要获取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

，则您可以将其用作左上角旋转的点。但是，如果它是一个百分比，则使用宽度和高度来计算旋转的点。

例如，20%的60px将是（宽度/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);
        }

    }

取

变换原点

并使用此函数（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;

    }

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