CSS3 rotate3d pr rotateX get actual height of element

Question

I want to get actual height of element when rotated 3d on x axis. I'll try to explain with graphics below:

Element's normal height: 200px

Actual height is 118px when rotate 45 degree with 100px perpective:

Actual height is 138px when rotate 45 degree with 1000px perpective:

Normal formule for calculate this height value (without perpective):

x = h * sin(angle)

Height must 142px with this formule. But it's diffrent from this value. Probably perspective changes height. But I don't find any formule for calculate this height.

Does anyone have any idea?

Answer 1

I benefited from efe's comment and calculated real view height of rotated element.

There is technical explanation about solution on djjeck's answer.

You can view this question's answer with an example: http://jsfiddle.net/TqJJL/3/

Calculate real height with this code:

// 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);
}