在CSS3变换后获取div的实际像素坐标
是否有可能获得已经使用CSS3属性（如scale ， skew和rotate转换的
例：
在CSS3转换之前，坐标是
x1y1: 0,0 x1y2: 0,200 x2y1: 200,0 x2yw: 200,200
div看起来像这样：
经过一点CSS3魔术transform: skew(10deg, 30deg) rotate(30deg) scale(1, 2); 它看起来像这样：
如何获得实际角点（不是边界框）的坐标（使用javascript）？ 任何帮助非常感谢。
经过几个小时试图计算所有变换并且几乎绝望地放弃了我想出了一个简单但天才的小黑客，这使得获得转换的
的角点非常容易
我刚刚在div中添加了四个手柄，这些手柄位于角落但看不见是看不见的：
.handle { background: none; height: 0px; position: absolute; width: 0px; } .handle.nw { left: 0; top: 0; } .handle.ne { right: 0; top: 0; } .handle.se { right: 0; bottom: 0; } .handle.sw { left: 0; bottom: 0; }
现在使用jQuery（或纯js），检索位置是一块蛋糕：
$(".handle.se").offset()
我认为没有API。 除了HTML5 没有API转换坐标之外。 但是有一种方法可以手动计算坐标。 这是我的库中的一个类来转换坐标： https ： //github.com/enepomnyaschih/jwcanvas/blob/master/jwidget/public/jwcanvas/transform.js
您可以将其用作模板。
要初始化坐标系，您应该只实例化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方法计算向后转换对象。
我向您推荐这个网站： http ： //www.useragentman.com/blog/2011/01/07/css3-matrix-transform-for-the-mathematically-challenged/ ，特别是“关于矩阵的其他有趣事实”部分” …
但正如Egor Nepomnyaschih指出的那样，你只需要为每次转换实施微积分并将它们链接起来。
我根据你的例子实现了一个jsFiddle： http ： //jsfiddle.net/pvS8X/3/ 。
要小心：原点是你身材的中间！ 如果你想参考左上角，你必须设置这是你的CSS代码：
transform-origin: 0 0;
比照 https://developer.mozilla.org/fr/docs/CSS/transform-origin 。
主要方法是这些：
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 = px + py * tan_a; p_skewed.y = px * tan_b + py; 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 = px * cos_th - py * sin_th; p_rot.y = px * sin_th + py * cos_th; return p_rot; } function scale(p, sx, sy) { var p_scaled = {}; p_scaled.x = px * sx; p_scaled.y = py * sy; return p_scaled; }
其中p是{ x: forms的对象。
您可以使用.getBoundingClientRect（）找到元素的新位置。