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

【问题标题】：What is the math behind -webkit-perspective?-webkit-perspective 背后的数学原理是什么？
【发布时间】：2011-11-06 19:07:51
【问题描述】：

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

我需要使用-webkit-perspective等方式找到被移动的东西的屏幕位置

【问题讨论】：

标签： css css-transforms webkit-perspective

【解决方案1】：

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

透视（）

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

这是一个开始，如果不是完全清楚的话。第一句话让我相信 Wikipedia 上的 the perspective projection matrix article 可能会有所帮助，尽管在这篇文章的 cmets 中显示 CSS 工作组的约定与 Wikipedia 中的约定之间可能存在一些细微差别，所以请检查那些出来让自己头疼。

【讨论】：

最后一句话正是我所需要的：“矩阵的计算方法是从一个单位矩阵开始，并将第 3 行第 4 列的值替换为值 -1/depth。”谢谢 ;) 现在我只需要计算出假定的焦距，但是通过反复试验很简单
@Domenic 维基百科页面为矩阵描述了 column 3 的 row 4 中的值 1/e_z。这是从 CSS3 文档给出的描述转换而来的。你知道这里发生了什么吗？规格是错误的还是我遗漏了导致换位的东西？手动计算示例，我很确定 1/depth 值也应该放在第 4 行第 3 行。
@StevenLu 很遗憾我帮不上什么忙。我知道在处理这些类型的事情时通常会有不同的约定，而且我很容易相信 CSS 工作组选择了与 Wikipedia 或大多数数学家不同的约定。我将编辑我的答案以指出存在一些差异，如果您找到解释它的好资源，我很乐意进一步编辑。

【解决方案2】：

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

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

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

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

例如。 div 500px 宽透视是10000px 变换在Z方向是-5000px

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

【讨论】：

【解决方案3】：

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

嗯，至于perspective()中的数字是什么意思，我觉得可以看成是想象中的摄像头位置到你电脑屏幕的距离。

【讨论】：