スキューの後のDIVの置き換え

Question

スキューで変換した後にDIVが移動します。変位をx軸または水平変位距離に沿ってどのように距離をとることができますか

理解を容易にするために、2つのdivを上下に配置しました。私は変換を適用する前と後にjavascriptを使って同じdivでこれをやりたい

div { 
 
    width: 300px; 
 
    height: 100px; 
 
    margin-left: 100px; 
 
    background-color: yellow; 
 
    border: 1px solid black; 
 
} 
 

 
div#myDiv { 
 
    // -ms-transform: skew(20deg,10deg); /* IE 9 */ 
 
// -webkit-transform: skew(20deg,10deg); /* Safari */ 
 
    transform: skew(-30deg); /* Standard syntax */ 
 
}

<div> 
 
This a normal div element. 
 
</div> 
 
<div id="myDiv"> 
 
This a skewed div element. 
 
</div>

Answer 1

あなたは、要素のサイズ

width_difference=document.getElementById("myDiv").getBoundingClientRect().width-document.getElementById("normal").getBoundingClientRect().width; 
 
console.log("width difference",width_difference); 
 
height_difference=document.getElementById("myDiv").getBoundingClientRect().height-document.getElementById("normal").getBoundingClientRect().height; 
 
console.log("height difference",height_difference);

div { 
 
    width: 300px; 
 
    height: 100px; 
 
    margin-left: 100px; 
 
    background-color: yellow; 
 
    border: 1px solid black; 
 
} 
 

 
div#myDiv { 
 
    // -ms-transform: skew(20deg,10deg); /* IE 9 */ 
 
// -webkit-transform: skew(20deg,10deg); /* Safari */ 
 
    transform: skew(-30deg); /* Standard syntax */ 
 
}

<div id="normal"> 
 
This a normal div element. 
 
</div> 
 
<div id="myDiv"> 
 
This a skewed div element. 
 
</div>