如何使用3D變換獲取未變換的元素的位置/大小？

我正在創建類似於3D地圖的東西，我需要在使用CSS3 3D變換的同時放大某些元素。我已經計算出，如果在任何旋轉之前應用翻譯，則可以非常簡單地使用未轉換的2D座標來執行此操作。如何使用3D變換獲取未變換的元素的位置/大小？

我現在的問題是得到一個元素的未轉換2D屬性，以便我可以移動'相機'來聚焦和放大到所述元素。

我已經嘗試在應用3D轉換之前存儲原始屬性，但這不可靠並且很不方便，因爲它沒有考慮視口更改，有時會給出奇數，就好像父容器更小一樣：

var contentChildren = $("#content3d").children().each(function(index, element){ 
    $(this).attr("flatleft", $(this).position().left); 
    $(this).attr("flattop", $(this).position().top); 
    $(this).attr("flatwidth", $(this).width()); 
    $(this).attr("flatheight", $(this).height()); 
});

那麼，我怎麼能得到一個元素的未轉換的屬性被轉換爲3D？

來源

2012-11-01 Steffan Donal

你可以嘗試在jquery中使用.data函數，就我所知，它的直觀性和可靠性非常可靠。

$(this).data("flatleft", $(this).position().left);

裁判：http://api.jquery.com/data/

來源

2012-11-01 10:09:40 roacher

當我說，這是不可靠的，我的意思是它不佔視口的變化，有時，直接節省了不合邏輯的數字。我應該說清楚，對不起。 –

這是非常奇怪的，你有沒有嘗試在轉換之前克隆元素，並直接從原始數據中獲取數據？ – roacher

否 - 我自此決定明確定義DOM以外的位置數據，但是我將這個問題留給公開。 –

如何使用3D變換獲取未變換的元素的位置/大小？

回答

相關問題