2011-11-06 69 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工作草案中刪除。也許這個描述可能有一些不準確的地方。

嗯,這個問題什麼呢在角度(<數>)裝置的數量,我認爲這可以被看作是想象中的攝像頭的位置和你的電腦屏幕之間的距離。