How do I calculate the size of a 3D translated element (with perspective)?

Question

Imagine I have a layout like so:

<div class='outer'>
    <div class='inner'></div>
</div>

and styled like so:

.outer {
    perspective: 1000px;
}

.inner {
    transform: translate3d(0,0,100px);
}

How can I (indeed, can I at all?) calculate what the size of this will be?

Answer 1

I'll try to explain it "in depth"

In the case of css, perspective value defines (in pixels) how far the camera(look at image above) is from the yellow plane(screen) This value is inversely proportional to the distortion : the closer - the wider pyramid. css3-transforms Working Draft

So here is translation matrix for the translate3d(0,0,100px);

      t
1 0 0 0   //x
0 1 0 0   //y
0 0 1 100 //z
0 0 0 1

Say we have 4 corners(points) of the element with the coordinates:

  p1 p2 p3 p4
X 0  1  0  1
Y 0  0  1  1
Z 1  1  1  1 // parallel to the screen.
  1  1  1  1

Let's apply translate3d(0,0,100px); to the p3:

The final position p3' will be multiplication of the translation matrix and the position vector p3:

   translation     p3      p3' 
    1 0 0 0        0       0
    0 1 0 0    X   1   =   1
    0 0 1 100      1       101
    0 0 0 1        1       1

The matrix for the css perspective projection with the identity matrix for perspective-origin(x and y position of the camera) will look like this:

1 0  0              0
0 1  0              0
0 0  1              0 
0 0 -1/perspective  1

Now multiply perspective projection matrix(with 1000px perspective) and p3' to apply perspective projection:

  perspective projection matrix     p3'      
    1 0  0      0                   0        0
    0 1  0      0         X         1     =  1       
    0 0  1      0                   101      101
    0 0 -0.001  1                   1        0.899 //w

w for the perspective projections serves as a scaling factor. And on screen position of the p3' will be x = x/w = 0 and y = y/w = 1.112 so we can repeat it for the other 3 point and finally calculate distance between them d = sqrt((x1 - x2)^2 + (y1 - y2)^2) to find new width and height or just scale original width and height in this case.