一、" 透視 " 概念簡介
1、" 透視 " 概念引入
在本博客中引入 3D 效果 透視視圖 Perspective 概念 ;
3D 視圖中 產(chǎn)生 3D 效果 , 最終要的是有透視效果 , 通俗的講 " 透視 " 就是實現(xiàn) " 近大遠(yuǎn)小 " 的效果 ;
透視 就是 將 3D 空間中的物體 投影顯示到 2D 平面中 ;
透視視圖 ( Perspective View ) : 近大遠(yuǎn)小 , 符合正常人眼觀察 3D 世界的規(guī)律 ;
- 近大 : 物體 距離 觀察點 ( 視點 ) 比較近時 , 顯示效果比較大 ;
- 遠(yuǎn)小 : 物體 距離 觀察點 ( 視點 ) 比較遠(yuǎn)時 , 顯示效果比較小 ;
下圖就是利用了 透視視圖 原理 , 照像機離鳥很近 , 離人很遠(yuǎn) ;
2、視距與成像關(guān)系
下圖中 , 
是 人的眼鏡 , 
是 3D 空間中的物體 , 
是一個 2D 平面 , 透視是 將 中間的 3D 物體投射到該 2D 平面中 ;
- 如果 中間的 3D 物體 向前移動 , 顯示在 2D 平面中的投影會變大 ;
- 如果 中間的 3D 物體 向后移動 , 顯示在 2D 平面中的投影會變小 ;
視距 : 人的 眼睛 到 屏幕 中的距離 , 就是 視距 , 也就是 上圖中的 d 距離 ;
- 視距 越小 , 也就是 視點 與 2D 平面之間 近 , 2D 平面的成像越大 ;
- 視距 越大 , 也就是 視點 與 2D 平面之間 遠(yuǎn) , 2D 平面的成像越小 ;
視距示例 : 看電腦屏幕 , 如果距離比較近 , 則視距小 , 成像較大 , 如 VR 眼睛 , 可以成像很大 ;
二、CSS3 中 " 透視 " 屬性設(shè)置
1、" 透視 " 語法設(shè)置
透視 屬性 需要寫在 被觀察元素 的 父容器 上 ;
透視 屬性 語法 :
perspective: d;
設(shè)置 透視 屬性 值 是 像素 px , 設(shè)置的是 視距 , 也就是 視點 到 投影平面 的距離 ;
- 視距越小 , 成像越大 ;
- 視距越大 , 成像越小 ;
perspective 透視屬性使用示例 :
body {
/* 透視 屬性 需要寫在 被觀察元素 的 父容器 上
視距越小 成像越大
如果想要網(wǎng)頁中的元素看起來大一些 可以減小視距 */
perspective: 500px;
}
2、代碼示例 - " 透視 " 語法設(shè)置
添加了透視后的代碼示例
核心代碼如下 : 需要為 div 設(shè)置透視效果 , 需要設(shè)置到 div 的父容器 body 上 ;
body {
/* 透視 屬性 需要寫在 被觀察元素 的 父容器 上
視距越小 成像越大
如果想要網(wǎng)頁中的元素看起來大一些 可以減小視距 */
perspective: 500px;
}
添加了透視后的代碼示例 :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>3D 轉(zhuǎn)換 - 平移</title>
<style>
body {
/* 透視 屬性 需要寫在 被觀察元素 的 父容器 上
視距越小 成像越大
如果想要網(wǎng)頁中的元素看起來大一些 可以減小視距 */
perspective: 500px;
}
div {
width: 200px;
height: 200px;
background-color: pink;
/* 設(shè)置 3D 轉(zhuǎn)換 */
transform: translateX(100px) translateY(100px) translateZ(100px)
}
</style>
</head>
<body>
<div></div>
</body>
</html>
執(zhí)行結(jié)果
執(zhí)行結(jié)果 :
參考上一篇博客 【CSS3】CSS3 3D 轉(zhuǎn)換 ① ( CSS3 3D 轉(zhuǎn)換簡介 | 3D 物體與 2D 物體區(qū)別 | 3D 空間坐標(biāo)系 | 常用的 3D 轉(zhuǎn)換屬性 | 3D 位移轉(zhuǎn)換語法 | 代碼示例 ) 中 , 沒有設(shè)置透視的效果 , 顯然 添加了透視后 , 3D 物體在 網(wǎng)頁 中成像比較大 ;文章來源：http://www.zghlxwxcb.cn/news/detail-646286.html
文章來源地址http://www.zghlxwxcb.cn/news/detail-646286.html
到了這里，關(guān)于【CSS3】CSS3 3D 轉(zhuǎn)換 ② ( 3D 透視視圖 | “ 透視 “ 概念簡介 | 視距與成像關(guān)系 | CSS3 中 “ 透視 “ 屬性設(shè)置 | “ 透視 “ 語法設(shè)置 | 代碼示例 )的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
