Javascript 获取CSS3变换后div的实际像素坐标

是否可以获取已使用CSS3属性（如

scale

、

skew

和

rotate

）转换的

的四个实际角坐标

示例：

在CSS3转换之前，坐标是

x1y1: 0,0
x1y2: 0,200
x2y1: 200,0
x2yw: 200,200

而div看起来是这样的：

经过一点CSS3魔术

变换：倾斜（10度，30度）旋转（30度）缩放（1，2）
看起来是这样的：


如何获取实际角点（而不是边界框）的坐标（使用javascript）？
非常感谢您的帮助。
我认为没有API可用于此。此外，HTML5中没有转换坐标的API。但是有一种方法可以手动计算坐标。下面是我的
库中的一个类，用于转换坐标：

您可以将其用作模板

要初始化坐标系，只需实例化
JW.Canvas.Transform
类的对象并应用方法
complex
。之后，可以通过
transform
方法对坐标系应用其他变换。矩阵为：


翻译：[1,0,0,1,x,y]
比例：[x，0，0，y，0，0]
顺时针旋转：[cos（a），sin（a），-sin（a），cos（a），0，0]
沿x方向倾斜：[1,0，tan（a），1,0,0]
沿y方向倾斜：[1，tan（a），0，1，0，0]

之后，您将能够通过
convert
方法转换坐标。使用
back
方法计算向后转换对象。
我向您推荐此站点：特别是“关于矩阵的其他有趣事实”一节

但正如Egor Nepomnyaschih所指出的，您只需要为每个转换实现演算并将它们链接起来

我已经基于您的示例实现了一个JSFIDLE:

只是要小心：原点在你身材的中间！如果您希望引用左上角，则必须设置以下CSS代码：

transform-origin: 0 0;

比照

主要方法如下：

function skew(p, alpha, beta) {
    var tan_a = Math.tan(alpha * Math.PI / 180),
        tan_b = Math.tan(beta * Math.PI / 180),
        p_skewed = {};

    p_skewed.x = p.x + p.y * tan_a;
    p_skewed.y = p.x * tan_b + p.y;

    return p_skewed;
}


function rotate(p, theta) {
    var sin_th = Math.sin(theta * Math.PI / 180),
        cos_th = Math.cos(theta * Math.PI / 180),
        p_rot = {};

    p_rot.x = p.x * cos_th - p.y * sin_th;
    p_rot.y = p.x * sin_th + p.y * cos_th;

    return p_rot;
}


function scale(p, sx, sy) {
    var p_scaled = {};

    p_scaled.x = p.x * sx;
    p_scaled.y = p.y * sy;

    return p_scaled;
}

其中p是形式为
{x:，y:}
的一个对象，经过数小时的计算，我几乎绝望地放弃了，我想出了一个简单但天才的小技巧，它使非常容易获得变换的
的角点

我刚刚在div中添加了四个控制柄，它们位于拐角处，但看不见：

<div id="div">
  <div class="handle nw"></div>
  <div class="handle ne"></div>
  <div class="handle se"></div>
  <div class="handle sw"></div>
</div>

现在使用jQuery（或纯js）检索位置很容易：

$(".handle.se").offset()

您可以使用.getBoundingClientRect（）找到元素相对于窗口的新位置。
基本上可以肯定的是，目前还没有相关的API。请记住，CSS转换在渲染区域中操作，而JS在ECMA/DOM区域中操作。虽然这是一个很好的嗜好。@Fabriciomatté我想我可以从属性中计算它们-我的数学朋友在哪里：）？没错，我以前见过几个类似的问题，我的评论是应用数学<代码>；）虽然我相信每个人都希望得到一个API或黑客，它以懒惰的方式为我们提供正确的数字<代码>：P

绝妙的解决方案！我在数学上绞尽脑汁太久了。这很简单，我还不太明白。这究竟是什么回报？我如何检索其他3个角？@Horen您只需将值放入2个字段x和y中，就会看到相应的输出。。。我已经更新了我的提琴，以获取相对于左上角而不是中间的坐标：。是否可以添加3d css变换（rotateX/Y和透视）？第一个链接正是我所需要的。谢谢它是否适用于CSS3 transform3D矩阵（rotateX、rotateY和perspective）？在3D中，4x4矩阵用于表示变换，因此正交变换将有12个有意义的数字，而不是6个，最后一行是固定的：[0、0、0、1]。平移、缩放、旋转和倾斜变换将具有类似的矩阵。快速谷歌搜索有助于找到透视投影矩阵：[[1,0,0,0]，[0,1,0,0]，[0,0,1,0]，[0,0,1/d,1]]（最后一行是有意义的！）感谢您的回答！哈明亮的我花了好几个小时来计算这个。终于放弃了，并期待着这样。你的答案很简单，也很有创意。我想补充一点，我目前正在使用这种技术，而且效果非常好！如果浏览器可以帮你做，为什么要自己做呢！注意：不适用于任意元素。仅适用于样式位置显式设置为相对或绝对的变换元素。另一方面，您的“句柄”最终可能会超出其父元素的边界。@user2782001您可以使用各种方法来确保每个元素都位于拐角处（即0x0容器，然后是留有边距的0x0或宽度高度的边距顶部等。基本上，您可以使用

边距

偏移角，但您必须在额外的0x0 div中包含角。

$(".handle.se").offset()