javascript - Displacement of DIV after skew -

i have div after transforming skew gets displaced. how can displaced distanced along x-axis or horizontal displaced distance

i have placed 2 divs 1 below other easy understanding. want on same div using javascript before , after applying transform.

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>  normal div element.  </div>  <div id="mydiv">  skewed div element.  </div>

you can use getboundingclientrect() obtain size of element

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">  normal div element.  </div>  <div id="mydiv">  skewed div element.  </div>