如何計算3D平移元素的大小（帶透視圖）？

Question

想象我有一個佈局，像這樣：

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

和風格，像這樣：

.outer { 
    perspective: 1000px; 
} 

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

我如何（事實上，可我呢？）計算出的這個規模將是什麼？

Answer 1

我會盡力解釋「深度」，它

在CSS中，透視值定義（像素）的情況下多遠相機（看上述圖像）是從黃色平面（屏幕）該值與失真成反比：越接近 - 更寬的金字塔。 css3-transforms Working Draft

所以這裏是translation matrix爲translate3d(0,0,100px);

 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 

與用於立體來源的單位矩陣（x和照相機的y位置）的CSS透視投影矩陣看起來就像這樣：

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

現在乘perspective projection matrix（與1000像素的角度）和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)以查找新的寬度和高度，或者只是在此情況下縮放原始寬度和高度。