css – 如何计算3D翻译元素的大小(带透视)？

2023年5月7日 272次阅读

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

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

和风格如下：

.outer {
    perspective: 1000px;
}

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

我怎么能(事实上,我可以吗？)计算出它的大小是多少？

最佳答案 我会试着“深入”解释它

在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’将是平移矩阵和位置向量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

现在将透视投影矩阵(使用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)在这种情况下找到新的宽度和高度或仅缩放原始宽度和高度.

点赞