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 enter image description here

Actual height is 118px when rotate 45 degree with 100px perpective: enter image description here

Actual height is 138px when rotate 45 degree with 1000px perpective: enter image description here

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?

This may help http://stackoverflow.com/questions/8648018/calculate-absolute-dimensions-of-a-div-rotated-in-perspective-with-css3 — efe, Dec 30 '13 at 11:19
It would be very nice if this height, the "rendered height", were accessible through the DOM. — Ben J, Aug 13 '15 at 12:13

score 2 · Accepted Answer · edited May 23 '17 at 10:26

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

CSS3 rotate3d pr rotateX get actual height of element

1 Answers1