2011-11-06 70 views
4

“简单”的问题,我无法找到答案 - 是什么-webkit-perspective实际上做数学? (我知道它具有的效果,它基本上像焦距控制​​一样)例如-webkit-perspective: 500是什么意思?!?-webkit-perspective背后的数学是什么?

我需要找到一个已经使用移动,除其他事项外的东西屏幕上的位置,-webkit-perspective

回答

7

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

角度(<号>)

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

这是一个开始的东西,如果不完全清楚。第一句话让我相信维基百科上的the perspective projection matrix article可能会有一些帮助,但在这篇文章的评论中显示,CSS工作组的惯例和维基百科中的惯例可能存在一些细微差异,所以请检查这些约定节省您的头痛。

+0

最后一句正是我所需要的:“矩阵的计算方法是从单位矩阵开始,并将第3行第4列的值替换为值-1 /深度。”谢谢;)现在我只需要找出假设的焦距,但是这很简单,试用与错误 –

+0

@Domenic维基百科页面描述矩阵的值* 1 * e_z * *第4 *列* * * *。这是从CSS3文档给出的描述转置而来的。你知道这里发生了什么吗?规格是否错误或者我是否错过了导致换位的原因?通过手工绘制示例,我很确定1 /深度值也应该在第4行第3列中进行。 –

+0

@StevenLu可悲的是我不能有太大的帮助。我知道在这些类型的工作中经常会有不同的惯例,我很容易相信CSS工作组选择了一个与维基百科或大多数数学家不同的人。我会编辑我的答案,指出存在一些差异,如果您找到解释该资源的好资源,我很乐意进一步编辑。 – Domenic

2

退房http://en.wikipedia.org/wiki/Perspective_projection#Diagram

阅读以前的意见,并做一些研究和测试后,我敢肯定,这是正确的。

注意,这是相同的对于Y坐标了。

转化X =原始X *(透视/(视角 - Z方向平移))

例如。 股利是500像素宽 视角是10000px 变换是在Z方向-5000px

转化的宽度= 500 *(10000 /(10000 - (-5000)) 转化的宽度= 500 *(10000/15000)= 500 *(2/3)= 333px

0

@Domenic奇怪的是,描述“矩阵的计算方法是从一个单位矩阵开始,并用值-1 /深度替换第3行第4列的值。已经从The CSS 3D Transforms Module工作草案中删除。也许这个描述可能有一些不准确的地方。

嗯,这个问题什么呢在角度(<数>)装置的数量,我认为这可以被看作是想象中的摄像头的位置和你的电脑屏幕之间的距离。