-webkit-perspective 背后的数学原理是什么？
我找不到答案的“简单”问题 - -webkit-perspective 实际上在数学上做了什么？ （我知道它的效果，它基本上就像一个焦距控制）例如 -webkit-perspective: 500 是什么意思？！？
我需要找到使用 -webkit-perspective 等方式移动的内容在屏幕上的位置
"Simple" question that I can't find the answer to -- What does -webkit-perspective actually do mathematically? (I know the effect it has, it basically acts like a focal-length control) e.g. what does -webkit-perspective: 500 mean?!?
I need to find the on-screen location of something that's been moved using, among other things, -webkit-perspective
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（3）
CSS 3D 变换模块工作草案给出了以下解释：
即使还不完全清楚，这也是一个开始。第一句话让我相信维基百科上的透视投影矩阵文章可能会有所帮助，尽管在评论中在这篇文章中，我们发现 CSS 工作组的约定与 Wikipedia 中的约定之间可能存在一些细微的差异，因此请检查一下这些约定，以免让自己头疼。
The CSS 3D Transforms Module working draft gives the following explanation:
This is something of a start, if not entirely clear. The first sentence leads me to believe the perspective projection matrix article on Wikipedia might be of some help, although in the comments on this post it is revealed there might be some slight differences between the CSS Working Group's conventions and those found in Wikipedia, so please check those out to save yourself a headache.
查看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
Check out http://en.wikipedia.org/wiki/Perspective_projection#Diagram
After reading the previous comments and doing some research and testing I'm pretty sure this is correct.
Notice that this is same for the Y coord too.
Transformed X = Original X * ( Perspective / ( Perspective - Z translation ) )
eg.
Div is 500px wide
Perspective is 10000px
Transform is -5000px in Z direction
Transformed Width = 500 * ( 10000 / ( 10000 - ( -5000 ) )
Transformed Width = 500 * ( 10000 / 15000) = 500 * (2/3) = 333px
@Domenic 奇怪的是，描述“矩阵是通过从单位矩阵开始并用值 -1/深度替换第 3 行、第 4 列的值来计算的。”已从 CSS 3D 变换模块 中删除现在起草。也许这个描述可能存在一些不准确之处。
好吧，至于perspective() 中的数字意味着什么，我认为它可以被视为想象的相机位置与计算机屏幕之间的距离。
@Domenic Oddly enough, the description "The matrix is computed by starting with an identity matrix and replacing the value at row 3, column 4 with the value -1/depth." has already been removed from the The CSS 3D Transforms Module working draft now. Perhaps there might have been some inaccuracies with this description.
Well, as to the question what does the number in perspective(<number>) means, I think it could be seen as the distance between the position of the imagined camera and your computer screen.