歪斜后的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>