如何计算3D翻译元素的大小（带透视）？

Question

想象一下，我有这样的布局：

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

并且风格如此：

.outer {
    perspective: 1000px;
}

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

我怎么能（事实上，我可以吗？）计算出它的大小是多少？

Answer 1

我会尝试解释它＆＃34;深入＆＃34;

在css的情况下，透视值定义（以像素为单位）摄像机（上方图像）距离黄色平面（屏幕）的距离此值与失真成反比：越接近 - 更宽的金字塔。 css3-transforms Working Draft

translate3d(0,0,100px);

就是translation matrix

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

假设我们有4个角点（点），坐标为：

  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

我们将translate3d(0,0,100px);应用于p3：

最终排名p3'将是translation matrix和位置向量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

css透视投影的矩阵与透视原点（相机的x和y位置）的单位矩阵将如下所示：

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

现在将perspective projection matrix（使用1000px透视图）和p3'相乘以应用透视投影：

  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用作比例因子。 p3'的屏幕位置将为x = x/w = 0和y = y/w = 1.112，因此我们可以重复其他3点，最后计算它们之间的距离d = sqrt((x1 - x2)^2 + (y1 - y2)^2)以找到新的宽度和在这种情况下，高度或只是缩放原始宽度和高度。