webkit透视图背后的数学原理是什么？

Question

我找不到答案的“简单”问题-- -webkit-perspective实际上在数学上是做什么的？(我知道它的效果，它基本上就像一个焦距控制)例如-webkit-perspective: 500是什么意思？！？

我需要使用-webkit-perspective等工具找到已被移动的内容的屏幕位置

Answer 1

The CSS 3D Transforms Module工作草案给出了以下解释：

透视图()

指定透视投影矩阵。这个矩阵将一个观察立方体映射到一个金字塔上，金字塔的底部距离观察者无限远，其峰值代表观察者的位置。可视区域是由视口的四个边缘(浏览器窗口的一部分，用于在查看者的位置和距查看者无限远的点之间呈现网页的部分)所限定的区域。深度作为函数的参数提供，表示z=0平面与查看器之间的距离。值越低，棱锥体越扁平，因此透视效果越明显。该值以像素为单位，因此值1000表示中等程度的缩短量，值200表示极限量。矩阵的计算方法是从一个单位矩阵开始，将第3行第4列的值替换为值-1/depth。深度的值必须大于零，否则函数无效。

这是一个开始，如果不是完全清楚的话。第一句话让我相信维基百科上的the perspective projection matrix article可能会有所帮助，尽管在这篇文章的评论中透露，CSS工作组的约定与维基百科中的约定可能有一些细微的差异，所以请查看这些约定，免得自己头疼。

Answer 2

查看http://en.wikipedia.org/wiki/Perspective_projection#Diagram

在阅读了前面的评论并做了一些研究和测试后，我非常确定这是正确的。

请注意，这对于Y坐标也是相同的。

变换X=原始X*(透视/(透视-Z平移))

例如：Div为500px宽透视为10000px在Z方向变换为-5000px

变换宽度= 500 *( 10000 /( 10000 -( -5000 ))变换宽度= 500 *( 10000 / 15000) = 500 * (2/3) = 333px

Answer 3

@Domenic奇怪的是，描述“矩阵是从单位矩阵开始计算的，并将第3行第4列的值替换为值-1/深度。”现已从The CSS 3D Transforms Module工作草案中删除。也许这种描述有一些不准确之处。

那么，关于透视()中的数字是什么意思的问题，我认为它可以被看作是想象中的相机位置和计算机屏幕之间的距离。