javascript 如何获得用css旋转变换的元素的位置
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/11229040/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to get the position of element transformed with css rotate
提问by sasklacz
I'm having a problem with getting the position of a div after rotatefilter is applied to it. I have the position of one end, its height, and the angle by which it is rotated, but after checking what this filter actually does on MDN ("[cos(angle) sin(angle) -sin(angle) cos(angle) 0 0]") I still don't know how to crack it.
我在rotate应用过滤器后获取 div 的位置时遇到问题。我有一端的位置，它的高度，以及它旋转的角度，但是在检查了这个过滤器在 MDN 上的实际作用之后 ("[cos(angle) sin(angle) -sin(angle) cos(angle) 0 0]") 我还是不知道怎么破解。
Example :
例子 ：
The div I'm interested in is the dashed line. Its styling at that moment was :
我感兴趣的 div 是虚线。当时它的造型是：
left: 80px; top: 12px; height: 69.5122px; width: 2px; -moz-transform: rotate(-1.21366rad);
left: 80px; top: 12px; height: 69.5122px; width: 2px; -moz-transform: rotate(-1.21366rad);
(top/leftdescribe the position of its beginning.) I'm trying to get the top/leftposition of its end.
（top/left描述其开始的位置。）我试图获得其结束的top/left位置。
采纳答案by arttronics
Per your current Question and your requested confirmation of:
根据您当前的问题和您要求的确认：
var x = termin.top + Math.cos(angle) * div.height;
var y = div.left + Math.sin(angle) * div.height;
The solution can be found in this other SO Answerfor a different question, enhanced here:
解决方案可以在另一个SO Answerfor a different question 中找到，在此处增强：
// return an object with full width/height (including borders), top/bottom coordinates
var getPositionData = function(el) {
return $.extend({
width: el.outerWidth(false),
height: el.outerHeight(false)
}, el.offset());
};
// get rotated dimensions
var transformedDimensions = function(el, angle) {
var dimensions = getPositionData(el);
return {
width: dimensions.width + Math.ceil(dimensions.width * Math.cos(angle)),
height: dimensions.height + Math.ceil(dimensions.height * Math.cos(angle))
};
};
Here's an interactivejsFiddle that provides real-time updatesfor getPositionData();function.
You'll be able to see the topand leftvalues at the end of the CSS3 Rotationprocess you control.
下面是一个互动的jsfiddle，提供实时更新的getPositionData();功能。
您将能够在您控制的CSS3 旋转过程结束时看到top和left值。
Reference: jsFiddle
参考： jsFiddle
Status Update:The above jsFiddle works great for 0-90degand can be approved upon for all angles and different units such as rad, grad, and turn.
状态更新：上面的 jsFiddle 适用于0-90deg，并且可以被批准用于所有角度和不同单位，例如rad、grad 和 turn。
回答by pozs
Try using element.getBoundingClientRect()
尝试使用 element.getBoundingClientRect()
According to MDN:
根据MDN：
Starting in Gecko 12.0 (Firefox 12.0 / Thunderbird 12.0) , the effect of CSS transforms is considered when computing the element's bounding rectangle.
从 Gecko 12.0 (Firefox 12.0 / Thunderbird 12.0) 开始，计算元素的边界矩形时会考虑 CSS 变换的效果。
