父容器X轴旋转后，计算子Div正面朝向屏幕的旋转角度

在带透视的CSS 3D场景中，父元素的rotateX结合perspective会产生非线性投影变形，直接用反向角度或半角度无法完美抵消，必须结合透视值和父元素参数计算精确的逆变换。

一、核心原理 #

父元素以底部为原点旋转X轴角度θ后，其3D空间内的子元素会继承倾斜状态，同时透视会放大远处元素的变形。要让子元素边缘与屏幕平行，需要计算透视投影下的逆旋转角度；要保持正方形，需要修正透视带来的高度压缩。

二、精确计算公式 #

1. 子元素旋转角度 #

设：

• θ：父元素X轴旋转角度（deg）
• P：场景透视值（px，vh单位需转换为具体像素值）
• H：父元素高度（px）

子元素需要的X轴旋转角度φ（deg）：

const thetaRad = θ * Math.PI / 180;
const zOffset = H * Math.sin(thetaRad); // 父元素顶部的Z轴偏移量
const scaleRatio = P / (P + zOffset);
const phiRad = -Math.atan(Math.tan(thetaRad) * scaleRatio);
const φ = phiRad * 180 / Math.PI;

2. 正方形宽高修正 #

父元素旋转后，子元素的高度在屏幕上会被透视压缩，要让显示的宽高相等，子元素实际高度应为：

const childWidth = 80; // 示例中子元素宽度
const childHeight = childWidth * (P + zOffset) / (P * Math.cos(thetaRad));

三、优化代码实现 #

CSS版本（需浏览器支持CSS三角函数） #

#scene { 
  position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); 
  width: 400px; height: 300px; perspective: 60vh; overflow: hidden; 
  --perspective: 60vh;
  --parent-angle: 50deg;
  --parent-height: 300px;
  --child-width: 80px;
}
#recp { 
  position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: #393; 
  transform: rotateX(var(--parent-angle)); transform-origin: bottom; 
  backface-visibility: hidden; transform-style: preserve-3d; 
}
#recp > div { 
  position: absolute; 
  width: var(--child-width); 
  height: calc(var(--child-width) * (var(--perspective) + var(--parent-height)*sin(var(--parent-angle))) / (var(--perspective)*cos(var(--parent-angle))));
  background: #999; 
  transform: rotateX(calc(-atan(tan(var(--parent-angle)) * var(--perspective)/(var(--perspective) + var(--parent-height)*sin(var(--parent-angle)))))); 
  transform-origin: bottom; 
  font-size: 48px; text-align: center; 
  line-height: calc(var(--child-width) * (var(--perspective) + var(--parent-height)*sin(var(--parent-angle))) / (var(--perspective)*cos(var(--parent-angle))));
}
#recp > div#elt1 { left: 0; top: 0; }
#recp > div#elt2 { left: 40%; top: 40%; }
#recp > div#elt3 { left: 80%; top: 60%; }

JS兼容版本（适配所有浏览器） #

const scene = document.getElementById('scene');
const parent = document.getElementById('recp');
const children = parent.querySelectorAll('div');

// 配置参数
const parentAngle = 50;
const childWidth = 80;

// 获取实际像素值
const perspective = parseFloat(getComputedStyle(scene).perspective);
const parentHeight = parent.offsetHeight;

// 角度转弧度工具函数
const degToRad = deg => deg * Math.PI / 180;
const radToDeg = rad => rad * 180 / Math.PI;

// 计算核心值
const thetaRad = degToRad(parentAngle);
const zOffset = parentHeight * Math.sin(thetaRad);
const scaleRatio = perspective / (perspective + zOffset);

// 子元素旋转角度
const childRotateAngle = radToDeg(-Math.atan(Math.tan(thetaRad) * scaleRatio));
// 子元素修正后高度
const childHeight = childWidth * (perspective + zOffset) / (perspective * Math.cos(thetaRad));

// 应用到子元素
children.forEach(child => {
  child.style.width = `${childWidth}px`;
  child.style.height = `${childHeight}px`;
  child.style.transform = `rotateX(${childRotateAngle}deg)`;
  child.style.lineHeight = `${childHeight}px`;
});

四、效果说明 #

• 子元素旋转角度通过透视逆变换计算，完美抵消父元素旋转带来的边缘倾斜，确保子元素边缘与屏幕平行。
• 高度修正公式补偿了透视压缩，让子元素在屏幕上显示为标准正方形。

内容的提问来源于stack exchange，提问作者Mike G.