Question 417986 in CSS Question posted in
Some basic documentation can be found here.

Css – How to obtain the height of an element after being transformed by the 'transform: rotateY (α)' attribute?

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’?

Tags:

2

Answers


  1. 0 
    // 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();
    Login or Signup to reply.
  2. 0

    As I was saying in comment, to measure the right side, you have two option

    1. Understand the projective geometry involved. I am not sure that is even standard (reproducible from one browser to another). Maybe it is.
      Basically, the coordinates are passed through a projective matrix, in homogeneous coordinates (that is, in 3D, 4 values (x y z w), that are equivalency classes (x/w, y/w, z/w, 1).

    2. Easier method: place an invisible 0-width witness div at the side of .page-L, and see what is its bounding box. Since it is 0-width, its bounging box height is its real height

    function go(){
    let a=parseFloat(document.querySelector('#angle').value);
    document.querySelector('.page-L').style.transform=`rotateY(${a}deg)`;
    const rect = document.querySelector('.sideL').getBoundingClientRect();
    document.querySelector('.page-R').style.height=rect.height+'px';
}
    .main{
    margin: 0;
    padding: 0; 
    box-sizing: border-box;
    display: flex;
    position: relative;
    height: 80vh;
    background-color:green;
    perspective: 1000px;
}
.page-L{
    position: relative;
    height: 100%;
    width: 30%;
    transform-origin: left;
    transform: rotateY(360deg);
    background-color:red;
}
.sideL{
    position: absolute;
    top:0;
    height:100%;
    right:0;
    width:0;
}
.page-R{
    position: relative;
    margin: auto;
    height: 100%;
    width: 70%;
    background-color: blue;
}
    <input id=angle><button onclick="go();">Rotate</button>
<div class=main>
<div class=page-L><div class=sideL></div></div>
<div class=page-R></div>
</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search