如何获取经transform: rotateY(α)变换后元素的高度并应用到.page-R元素

嘿，这个问题核心是要搞定CSS 3D透视下的视觉高度计算——因为rotateY配合父元素的perspective会产生近大远小的透视效果，直接用普通的offsetHeight或者getBoundingClientRect()拿不到你要的右侧视觉压缩后的高度，得手动通过透视公式计算。下面是具体的实现思路和代码：

核心原理 #

当.page-L绕左侧（transform-origin: left）执行rotateY(α)时，它的右侧边缘会向屏幕内部（Z轴负方向）偏移，结合父元素的透视值，视觉上的高度会按照透视投影缩放因子缩小。这个缩放因子的计算公式是：
缩放因子 = perspective值 / (perspective值 + 元素宽度 * sin(旋转弧度))
最终视觉高度 = 元素原始高度 * 缩放因子

具体实现步骤 #

1. 获取必要的DOM元素和样式参数
   先拿到目标元素以及父元素的计算样式，提取透视值、元素原始宽高、旋转角度：

   const main = document.querySelector('.main');
   const pageL = document.querySelector('.page-L');
   const pageR = document.querySelector('.page-R');
   
   // 获取父元素的perspective值（转成数字，无透视时设为0）
   const mainStyle = getComputedStyle(main);
   const perspective = parseFloat(mainStyle.perspective) || 0;
   
   // 获取.page-L的原始宽高（offset系列适配border-box布局）
   const pageLWidth = pageL.offsetWidth;
   const pageLHeight = pageL.offsetHeight;
   
   // 从transform矩阵中解析rotateY的弧度值
   let alphaRad = 0;
   const pageLTransform = getComputedStyle(pageL).transform;
   if (pageLTransform.startsWith('matrix3d(')) {
       const matrixParts = pageLTransform.slice(9, -1).split(',').map(parseFloat);
       const cosAlpha = matrixParts[0];
       const sinAlpha = matrixParts[2];
       alphaRad = Math.atan2(sinAlpha, cosAlpha);
   }
   

2. 计算视觉高度并应用到.page-R
   根据透视公式计算出变换后的视觉高度，然后设置给.page-R：

   function updatePageRHeight() {
       // 实时获取最新的元素宽高（窗口变化时更新）
       const currentWidth = pageL.offsetWidth;
       const currentHeight = pageL.offsetHeight;
   
       let visualHeight = currentHeight;
       if (perspective > 0) {
           // 计算透视缩放因子
           const scaleFactor = perspective / (perspective + currentWidth * Math.sin(alphaRad));
           visualHeight = currentHeight * scaleFactor;
       }
   
       // 将计算结果应用到.page-R
       pageR.style.height = `${visualHeight}px`;
   }
   
   // 页面加载时初始化执行
   updatePageRHeight();
   

3. 监听窗口变化，实时同步高度
   窗口大小改变会影响元素尺寸和透视效果，所以添加resize监听保证高度实时更新：

   window.addEventListener('resize', updatePageRHeight);
   

额外说明 #

• 如果.page-L是动态变换角度（比如CSS动画），可以用requestAnimationFrame替代resize监听，实现高度的实时同步。
• 若父元素perspective设为none，透视效果消失，旋转后的视觉高度与原始高度一致，直接赋值原始高度即可。

备注：内容来源于stack exchange，提问作者FROATX