歪斜後的DIV位移

Question

我有DIV，在歪斜變形後變形。我們如何獲得沿x軸或水平位移距離的位移距離

爲了便於理解，我已將兩個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

可以使用getBoundingClientRect()獲得元素的大小

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>