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%;
}
If you have any misunderstandings about my question, please take a look at this!!
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’?
New contributor
FROATX is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.
8
// Function to calculate the rotated height of .page-L
function getTransformedHeight() {
const pageL = document.querySelector('.page-L');
// Get the bounding box of the element after transformation
const rect = pageL.getBoundingClientRect();
// The height after transformation will be the height of the bounding box
return rect.height;
}
// Function to update the height of .page-R based on .page-L's transformed
height
function updatePageRHeight() {
const pageR = document.querySelector('.page-R');
const transformedHeight = getTransformedHeight();
// Set the height of .page-R to match the transformed height of .page-L
pageR.style.height = `${transformedHeight}px`;
}
// Example usage: Call this function after applying the rotateY transform
updatePageRHeight();
New contributor
Cesar is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.
1