Cách lấy vị trí của phần tử được chuyển đổi với css xoay

Question

Tôi gặp sự cố khi nhận vị trí của div sau rotate bộ lọc được áp dụng cho nó. Tôi có vị trí của một đầu, chiều cao của nó và góc mà nó quay, nhưng sau khi kiểm tra bộ lọc này thực sự làm gì trên MDN ("cos (góc) sin (góc) -sin (góc) cos (góc) 0 0] ") Tôi vẫn không biết làm thế nào để crack nó.

Ví dụ:

Các div Tôi quan tâm đến là dòng tiêu tan. phong cách của mình vào lúc này đó là:

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

(top/left mô tả vị trí của đầu của nó.) Tôi đang cố gắng để có được vị trí top/left của kết thúc của nó.

Answer 1

mỗi Câu hỏi hiện tại của bạn và xác nhận yêu cầu của bạn về:

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

Các giải pháp có thể được tìm thấy trong SO Answer khác này cho một câu hỏi khác nhau , tăng cường ở đây:

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

Dưới đây là tương tác jsFiddle cung cấp cập nhật theo thời gian thực cho chức năng getPositionData();.
Bạn sẽ có thể thấy các giá trị top và left ở cuối quá trình CSS3 Rotation bạn kiểm soát.

tham khảo:     jsFiddle

Status Update: Trên đây jsFiddle hoạt động tuyệt vời cho 0-90deg và có thể được chấp thuận khi cho tất cả các góc và các đơn vị khác nhau như rad, grad, and turn.

Answer 2

Hãy thử sử dụng element.getBoundingClientRect()

Theo MDN:

Bắt đầu từ năm Gecko 12.0 (Firefox 12.0/Thunderbird 12.0), ảnh hưởng của biến đổi CSS được xem xét khi tính toán hình chữ nhật bounding của phần tử.