CSS3 rotate3d pr rotateX获取元素的实际高度

Question

我希望在x轴上旋转3d时获得元素的实际高度。我将尝试用下面的图形解释：

元素的正常高度：200px

当旋转45度时，实际高度为118px，100px：

当旋转45度，1000px时，实际高度为138px：

用于计算此高度值的正常公式（无需考虑）：

x = h * sin(angle)

这个公式的高度必须为142px。但它与这个价值不同。可能透视改变高度。但我没有找到任何用于计算这个高度的公式。

有没有人有任何想法？

Answer 1

我从efe的评论中受益，并计算了旋转元素的实际视图高度。

关于djjeck answer的解决方案有技术解释。

您可以通过示例查看此问题的答案：http://jsfiddle.net/TqJJL/3/

使用以下代码计算实际高度：

// initial coordinates
var A = 0;
var B = width; // default size of element
// new coordinates
A = calc(A, angle*Math.PI/180, p);
B = calc(B, angle*Math.PI/180, p);
// translate back
A += width/2;
B += width/2;
if(B < A) { var tmp = A; A = B; B = tmp; } // swap

var realHeight = B-A;

function calc(oldx, angle, p) {
    var x = Math.cos(angle) * oldx;
    var z = Math.sin(angle) * oldx;

    return x * p / (p+z);
}