如何获取元素的位置用css旋转 [英] How to get the position of element transformed with css rotate
问题描述
我遇到一个问题,在 rotate
过滤器应用后,获取一个div的位置。我有一个端点的位置,它的高度和它旋转的角度,但是在检查这个滤波器对MDN([cos(angle)sin(angle)-sin(angle)cos(angle) 0 0])我仍然不知道如何破解它。
I'm having a problem with getting the position of a div after rotate
filter 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.
例如:
我感兴趣的div是虚线。当时的样式是:
The div I'm interested in is the dashed line. Its styling at that moment was :
left:80px; top:12px; height:69.5122px; width:2px; -moz-transform:rotate(-1.21366rad);
( top
left
描述它的开始位置。)我想获得顶部
/
(top
/left
describe the position of its beginning.) I'm trying to get the top
/left
position of its end.
推荐答案
根据您当前的问题和您要求的确认:
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;
此解决方案可以在此其他 SO回答 。
$ b b
The solution can be found in this other SO Answer for a different question, enhanced here:
// 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();
函数的实时更新。
您将能够看到
Here's an interactive jsFiddle that provides real-time updates for getPositionData();
function.
You'll be able to see the top
and left
values at the end of the CSS3 Rotation process you control.
参考: jsFiddle
Reference: jsFiddle
状态更新:上述jsFiddle适用于 0-90deg 所有角度和不同单位,例如 rad,grad和turn strong> 。
Status Update: The above jsFiddle works great for 0-90deg and can be approved upon for all angles and different units such as rad, grad, and turn.
这篇关于如何获取元素的位置用css旋转的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!