Let’s assume there is a style like the following:
.main{
margin: 0;
padding: 0;
box-sizing: border-box;
display: flex;
position: relative;
height: 100vh;
perspective: 1000px;
}
.page-L{
position: relative;
height: 100%;
width: 30%;
transform-origin: left;
transform: rotateY(α);
}
.page-R{
position: relative;
margin: auto;
height: 100%;
width: 70%;
}
These two elements are children of “main”.
As you can see, you can clearly see that the element ‘page-L’ will undergo a deformation, and this will cause a visual change to its right side.
What should I do to obtain its changed value (height) through JavaScript and apply it to the element ‘page-R’?