css - -webkit-perspective 背后的数学原理是什么？

Question

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

我需要找到被移动的东西的屏幕位置，除其他外，-webkit-perspective

Answer 1

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

透视图（<数字>）

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

这是一个开始，如果不是完全清楚的话。第一句话让我相信Wikipedia 上的透视投影矩阵文章可能会有所帮助，尽管在这篇文章的评论中显示 CSS 工作组的约定与 Wikipedia 中的约定之间可能存在一些细微差异，所以请检查这些，以免让自己头疼。

Answer 2

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

在阅读了之前的评论并进行了一些研究和测试之后，我很确定这是正确的。

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

转换后的 X = 原始 X * ( 透视 / ( 透视 - Z 平移 ) )

例如。Div 为 500px 宽 Perspective 为 10000px 变换在 Z 方向为 -5000px

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

Answer 3

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

好吧，关于透视中的数字（<number>）是什么意思，我认为它可以看作是想象中的相机位置与您的计算机屏幕之间的距离。