建站
咨詢
售后
建站咨詢
新聞中心
投影
根據(jù)投影中心與投影平面之間距離的不同，投影可分為 「平行投影」 和 「透視投影」。平行投影的投影中心與投影之間的距離為無窮大，如左圖;而對透視投影，這距離是有限的，如右圖。
讓客戶滿意是我們工作的目標(biāo)，不斷超越客戶的期望值來自于我們對這個(gè)行業(yè)的熱愛。我們立志把好的技術(shù)通過有效、簡單的方式提供給客戶，將通過不懈努力成為客戶在信息化領(lǐng)域值得信任、有價(jià)值的長期合作伙伴，公司提供的服務(wù)項(xiàng)目有：主機(jī)域名、網(wǎng)絡(luò)空間、營銷軟件、網(wǎng)站建設(shè)、上海網(wǎng)站維護(hù)、網(wǎng)站推廣。
在 CSS 中，使用 transform3d 變換后的圖形也就有了投影的概念。
平行投影
平行投影包括斜平行投影和正平行投影
開啟transform3d后，在未開啟透視的情況下，所有html元素默認(rèn)處于translateZ=0的狀態(tài)，即屬于正平行投影
透視投影
一點(diǎn)透視
- 視平線
- 一個(gè)消失點(diǎn)
兩點(diǎn)透視
- 視平線
- 兩個(gè)消失點(diǎn)
三點(diǎn)透視
- 視平線
- 三個(gè)消失點(diǎn)
在css中，只有一點(diǎn)透視的概念。消失點(diǎn)就是 perspective-origin。
平行投影和透視投影
無數(shù)條投影線組成投影空間
透視投影的投影空間用四棱錐表示
平行投影的投影空間用四棱柱表示
最終投影得出的畫面由棱柱/棱錐的每個(gè)截面(縮放到同一大小后)合成，所以透視投影就會出現(xiàn)近大遠(yuǎn)小，而平行投影反映了物體之間的絕對大小
css透視
perspective
css透視需要關(guān)注幾個(gè)點(diǎn)
如圖所示，
- 投影中心：眼睛
- 投影面：drawing surface
- 即屏幕最終顯示的效果
- 投影面的translateZ=0
- 物體：
- 虛線的圓代表物體實(shí)際的大小
- 圖1代表物體translateZ>0的情況
- 圖2代表物體translateZ<0的情況
- 實(shí)線的圓代表平行投影后的大小
- 同時(shí)也代表在透視投影中，物體translateZ=0的情況
- 藍(lán)色的圓代表透視投影后的大小
- 投影中心到投影面的距離：d
- 即perspective的值
- 如果物體translateZ>=d，那么將不會出現(xiàn)在投影面中
- 物體到投影面的距離：z
- 即translateZ的值
perspective-origin
perspective-origin即一點(diǎn)透視中的消失點(diǎn)，可以把每個(gè)正方體理解為不同origin時(shí)展示的畫面
讀者可通過在線示例了解更多細(xì)節(jié)：https://codepen.io/dkplus/pen/powJYgm
分享文章：讀懂 CSS 投影與透視
文章出自：http://www.dlmjj.cn/article/cdpcoco.html
