如何獲取用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轉換的元素的位置旋轉

回答

相關問題