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

Question

在rotate应用过滤器后获取div的位置时遇到问题.我有一个端点的位置,它的高度和它旋转的角度,但在检查了这个滤波器实际上对MDN的影响("[cos(角度)sin(角度)-sin(角度)cos(角度) 0 0]")我仍然不知道如何破解它.

示例:

我感兴趣的div是虚线.它的造型在那一刻是:

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

(top/ left描述它的开始位置).我试图让top/ left其最终的位置.

Answer 1

根据您当前的问题和您要求的确认:

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

解决方案可以在这个其他的SO答案中找到一个不同的问题,在这里增强:

// 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和turn.

Answer 2

尝试使用 element.getBoundingClientRect()

根据MDN：

从Gecko 12.0（Firefox 12.0 / Thunderbird 12.0）开始，在计算元素的边界矩形时会考虑CSS转换的效果。