【CSS3】CSS3 3D 转换 ② ( 3D 透视视图 | “ 透视 “ 概念简介 | 视距与成像关系 | CSS3 中 “ 透视 “ 属性设置 | “ 透视 “ 语法设置 | 代码示例 )

朱雀 2023-10-14 18:17 90阅读 0赞

#### 文章目录 ####

*  一、" 透视 " 概念简介
 *   *  1、" 透视 " 概念引入
     *  2、视距与成像关系
 *  二、CSS3 中 " 透视 " 属性设置
 *   *  1、" 透视 " 语法设置
     *  2、代码示例 - " 透视 " 语法设置
     *   *  添加了透视后的代码示例
         *  执行结果

## 一、" 透视 " 概念简介 ##

--------------------

### 1、" 透视 " 概念引入 ###

在本博客中引入 3D 效果 透视视图 Perspective 概念 ;

3D 视图中 产生 3D 效果 , 最终要的是有透视效果 , 通俗的讲 " 透视 " 就是实现 " 近大远小 " 的效果 ;

透视 就是 将 3D 空间中的物体 投影显示到 2D 平面中 ;

**透视视图 ( Perspective View ) :** 近大远小 , 符合正常人眼观察 3D 世界的规律 ;

*  **近大 :** 物体 距离 观察点 ( 视点 ) 比较近时 , 显示效果比较大 ;
 *  **远小 :** 物体 距离 观察点 ( 视点 ) 比较远时 , 显示效果比较小 ;

下图就是利用了 透视视图 原理 , 照像机离鸟很近 , 离人很远 ;  
![在这里插入图片描述][b0c3e9907a2b4294830438e6e1970b61.png]

### 2、视距与成像关系 ###

下图中 , ![在这里插入图片描述][a76e9833a503432b869a5c7dc8362a58.png] 是 人的眼镜 , ![在这里插入图片描述][ac68df53936c4b69933a60060126dda0.png] 是 3D 空间中的物体 , ![在这里插入图片描述][764775e3204a4b7793633bb94e1317a5.png] 是一个 2D 平面 , 透视是 将 中间的 3D 物体投射到该 2D 平面中 ;

*  如果 中间的 3D 物体 向前移动 , 显示在 2D 平面中的投影会变大 ;
 *  如果 中间的 3D 物体 向后移动 , 显示在 2D 平面中的投影会变小 ;

![在这里插入图片描述][96bbc4ac564e4cbd9c514ccfcad942c0.png]

**视距 :** 人的 眼睛 到 屏幕 中的距离 , 就是 视距 , 也就是 上图中的 d 距离 ;

*  视距 越小 , 也就是 视点 与 2D 平面之间 近 , 2D 平面的成像越大 ;
 *  视距 越大 , 也就是 视点 与 2D 平面之间 远 , 2D 平面的成像越小 ;

**视距示例 :** 看电脑屏幕 , 如果距离比较近 , 则视距小 , 成像较大 , 如 VR 眼睛 , 可以成像很大 ;

## 二、CSS3 中 " 透视 " 属性设置 ##

--------------------

### 1、" 透视 " 语法设置 ###

**透视 属性 需要写在 被观察元素 的 父容器 上 ;**

透视 属性 语法 :

perspective: d;

设置 透视 属性 值 是 像素 px , 设置的是 视距 , 也就是 视点 到 投影平面 的距离 ;

*  视距越小 , 成像越大 ;
 *  视距越大 , 成像越小 ;

**perspective 透视属性使用示例 :**

body {
        
                /* 透视 属性 需要写在 被观察元素 的  父容器 上
                    视距越小 成像越大 
                    如果想要网页中的元素看起来大一些 可以减小视距 */
                perspective: 500px;
            }

### 2、代码示例 - " 透视 " 语法设置 ###

#### 添加了透视后的代码示例 ####

**核心代码如下 :** 需要为 div 设置透视效果 , 需要设置到 div 的父容器 body 上 ;

**添加了透视后的代码示例 :**

<!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 转换 - 平移</title>
        <style>
            body {
          
                /* 透视 属性 需要写在 被观察元素 的  父容器 上
                    视距越小 成像越大 
                    如果想要网页中的元素看起来大一些 可以减小视距 */
                perspective: 500px;
            }
            
            div {
          
                width: 200px;
                height: 200px;
                background-color: pink;
                /* 设置 3D 转换 */
                transform: translateX(100px) translateY(100px) translateZ(100px)
            }
        </style>
    </head>
    
    <body>
        <div></div>
    </body>
    
    </html>

#### 执行结果 ####

**执行结果 :**

![在这里插入图片描述][eca7b82d8b3b400aaf7a76b1b892fe0e.png]

![在这里插入图片描述][7b500ee1d37842609a44c86b00f65ded.png]

[b0c3e9907a2b4294830438e6e1970b61.png]: https://img-blog.csdnimg.cn/b0c3e9907a2b4294830438e6e1970b61.png
[a76e9833a503432b869a5c7dc8362a58.png]: https://img-blog.csdnimg.cn/a76e9833a503432b869a5c7dc8362a58.png
[ac68df53936c4b69933a60060126dda0.png]: https://img-blog.csdnimg.cn/ac68df53936c4b69933a60060126dda0.png
[764775e3204a4b7793633bb94e1317a5.png]: https://img-blog.csdnimg.cn/764775e3204a4b7793633bb94e1317a5.png
[96bbc4ac564e4cbd9c514ccfcad942c0.png]: https://img-blog.csdnimg.cn/96bbc4ac564e4cbd9c514ccfcad942c0.png
[eca7b82d8b3b400aaf7a76b1b892fe0e.png]: https://img-blog.csdnimg.cn/eca7b82d8b3b400aaf7a76b1b892fe0e.png
[CSS3_CSS3 3D _ _ _ CSS3 3D _ _ 3D _ 2D _ _ 3D _ _ _ 3D _ _ 3D _ _ _]: https://hanshuliang.blog.csdn.net/article/details/132223129?spm=1001.2014.3001.5502#_287
[7b500ee1d37842609a44c86b00f65ded.png]: https://img-blog.csdnimg.cn/7b500ee1d37842609a44c86b00f65ded.png