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

韩曙亮

发布于 2023-10-15 16:13:03

6920

文章被收录于专栏：韩曙亮的移动开发专栏韩曙亮的移动开发专栏

一、" 透视 " 概念简介

1、" 透视 " 概念引入

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

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

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

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

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

下图就是利用了透视视图原理 , 照像机离鸟很近 , 离人很远 ;

2、视距与成像关系

下图中 ,

是人的眼镜 ,

是 3D 空间中的物体 ,

是一个 2D 平面 , 透视是将中间的 3D 物体投射到该 2D 平面中 ;

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

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

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

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

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

1、" 透视 " 语法设置

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

透视属性语法 :

perspective: d;

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

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

perspective 透视属性使用示例 :

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

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

添加了透视后的代码示例

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

        body {
            /* 透视 属性 需要写在 被观察元素 的  父容器 上
                视距越小 成像越大 
                如果想要网页中的元素看起来大一些 可以减小视距 */
            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 转换 - 平移</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>