如何获取用css转换的元素的位置旋转

我在应用rotate筛选器后获取div的位置时出现问题。我有一个端点的位置，它的高度和它旋转的角度，但是在检查过滤器实际上在MDN上做了什么之后（“[cos（角度）sin（角度）-sin（角度）cos（角度） 0 0]“）我仍然不知道如何破解它。如何获取用css转换的元素的位置旋转

例子：

enter image description here

我感兴趣的DIV是虚线。它在那一刻的造型是：

left: 80px; top: 12px; height: 69.5122px; width: 2px; -moz-transform: rotate(-1.21366rad);

（top/left描述它的开始位置。）我试图得到其最终的top/left位置。

来源

2012-06-27 owca

刷新我的数学知识后，我想出了这样的事情：var x = termin.top + Math.cos（angle）* div.height; var y = div.left + Math.sin（angle）* div.height;任何人都可以确认，如果这是正确的解决方案？ – owca

根据您当前的问题和你的请求的确认：

var x = termin.top + Math.cos(angle) * div.height; 
var y = div.left + Math.sin(angle) * div.height;

该解决方案可以在这个其他SO Answer中找到一个不同的问题，提高这里：

// 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)) 
    }; 
};

这里有一个互动 jsFiddle提供实时更新为getPositionData();功能。
您将能够在您控制的CSS3旋转过程结束时看到top和left值。

参考： jsFiddle

状态更新：以上的jsfiddle的伟大工程0-90deg，可以在所有角度和不同的单位，如rad, grad, and turn批准。

来源

2012-07-01 23:42:53 arttronics

尝试使用element.getBoundingClientRect()

根据MDN：

开始在壁虎12.0（12.0火狐/雷鸟12.0），CSS的效果变换计算元件的边界矩形时被认为是。

来源

2012-07-03 21:13:50 pozs

我们知道其他浏览器考虑使用'getBoundingClientRect'进行转换吗？最重要的是：IE在哪一点？它可以与IE9一起使用吗？ –

@JimboJonny [来自我的测试]（https://jsfiddle.net/hhwrv5ov/）似乎IE9也将转换考虑在内（但将结果舍入为整像素）。 IE10与其他浏览器一样工作（不包括结果）。 – pozs

如何获取用css转换的元素的位置旋转

回答

相关问题