歪斜后DIV的位移

Question

我用DIV转换它后有DIV它会被取代。我们如何才能使位移沿x轴或水平位移距离

为了便于理解，我将两个div放在另一个下面。我想在应用转换之前和之后使用javascript在同一个div上执行此操作。

＆＃13;

＆＃13;

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 */
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 1

您可以使用getBoundingClientRect()来获取元素的大小

＆＃13;

＆＃13;

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);

＆＃13;

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 */
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;