適用されたCSS3パースペクティブを持つdomのElement.getBoundingClientRect（）前の変換としてDOMRectオブジェクトを返します

Question

Element.getBoundingClientRect()Refを使用してCSS3パースペクティブプロパティを使用して変換されるdivの座標を返すことができるかどうかを知りたいと思います。

私はCSS 3のscale()skewX()のように変換しますが、perspectiveが印加されると、値が変換後のDOM要素のサイズと一致していません（DOMRect）返されたためElement.getBoundingClientRect()が正常に動作していることに気づきます。

私のケースでは、IDがbbのdivは、CSS変換後の要素の境界ボックスの上に幅/高さ/上/左の位置があることを確認する必要があります。変換前の要素）。

ご了承ください。

var elm = document.querySelector('#div2'); 
 
var elmBb = document.querySelector('#bb'); 
 
var rect = elm.getBoundingClientRect(); 
 
//console.log(rect); 
 
elmBb.style.top = rect.top + 'px'; 
 
elmBb.style.left = rect.left + 'px'; 
 
elmBb.style.width = rect.width + 'px'; 
 
elmBb.style.height = rect.height + 'px';

#div1 { 
 
    position: fixed; 
 
    height: 150px; 
 
    width: 150px; 
 
    margin: 50px; 
 
    padding: 10px; 
 
    border: 1px solid black; 
 
    perspective: 150px; 
 
} 
 

 
#div2 { 
 
    padding: 50px; 
 
    position: absolute; 
 
    border: 1px solid black; 
 
    background-color: red; 
 
    transform: rotateX(45deg); 
 
} 
 

 
#bb { 
 
    position: fixed; 
 
    border: 1px solid blue; 
 
}

<div id="div1"> 
 
    <div id="div2">HELLO</div> 
 
</div> 
 
<div id="bb"></div>

Answer 1

私は変革を持っており、視点が、変換要素のDOMにElement.getBoundingClientRect()を使用する必要がある適用される要素のバウンディングボックスを返すために、この問題への解決策を見つけました次の例のようにperspectiveが適用されている親コンテナには表示されません。

var elm = document.querySelector('#div2'); 
 
var elmBb = document.querySelector('#bb'); 
 
var rect = elm.getBoundingClientRect(); 
 
console.log(rect); 
 
elmBb.style.top = rect.top + 'px'; 
 
elmBb.style.left = rect.left + 'px'; 
 
elmBb.style.width = rect.width + 'px'; 
 
elmBb.style.height = rect.height + 'px';

#div1 { 
 
    position: fixed; 
 
    height: 150px; 
 
    width: 150px; 
 
    margin: 50px; 
 
    padding: 10px; 
 
    border: 1px solid black; 
 
    perspective: 150px; 
 
} 
 

 
#div2 { 
 
    padding: 50px; 
 
    position: absolute; 
 
    border: 1px solid black; 
 
    background-color: red; 
 
    transform: rotateX(45deg); 
 
} 
 

 
#bb { 
 
    position: fixed; 
 
    border: 1px solid blue; 
 
}

<div id="div1"> 
 
    <div id="div2">HELLO</div> 
 
</div> 
 
<div id="bb"></div>