【CSS3】CSS3 3D 转换 ③ ( 3D 透视视图 | translateZ 转换分析 | 网页调试工具调试 translateZ 属性值 | 代码示例 )_css translatez

作者：编程变革者 | 2024-02-05 09:52:46

踩

css translatez

文章目录

一、translateZ 转换分析
- 1、translateZ 转换对应的空间分析
- 2、网页调试工具调试 translateZ 属性值
二、代码示例 - translateZ 转换分析
- 1、代码示例 - translateZ 为 0 的参照示例
- 2、代码示例 - translateZ 为 200 示例

一、translateZ 转换分析

1、translateZ 转换对应的空间分析

" 透视 " 是模拟人的眼镜 , 观察物体在平面上的成像 ,

translateZ 转换 , 是物体沿着 Z 轴移动 , 也就是下图中的 Z 距离 ;

在这里插入图片描述

Z 轴的 Z 数值是物体和成像平面之间的距离 , 默认为 0 ;

如果 Z 增加 , 说明物体越靠近眼睛 , 在平面上成像范围更大 ;
如果 Z 减小 , 说明物体越远离眼睛 , 在平面上成像范围减小 ;

translateZ 转换就是上图中的 Z 距离转换 , Z 越大 , 越靠近眼睛 , 物体显示就越大 ;

2、网页调试工具调试 translateZ 属性值

在网页中 , 修改标签元素的 transform: translateZ 属性值 , Z 轴平移值为 0 时 , 显示的样式如下 , 标签元素显示的大小就是其本身大小 ;

在这里插入图片描述
Z 轴平移值为 -200 px 时 , 显示的样式如下 , 标签元素会变小 ; 近大远小 , 这里变远了 ;

在这里插入图片描述
Z 轴平移值为 200 px 时 , 显示的样式如下 , 标签元素会变大 ; 近大远小 , 这里变近了 ;

二、代码示例 - translateZ 转换分析

1、代码示例 - translateZ 为 0 的参照示例

在下面的代码中 , 设置了 500 像素的视距 ;

设置元素的 3D 转换属性为 :

            /* 设置 3D 转换 */
            transform: translateZ(0)
1
2

相当于在下图中 , 视距 ( 人眼距离成像平面距离 ) $d = 500$ 像素 , 物体距离成像平面距离 $Z = 0$ 像素 , 此时物体的大小就是其本身的大小 ;
在这里插入图片描述

代码示例 :

<!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;
            margin: 100px auto;
            /* 设置 3D 转换 */
            transform: translateZ(0)
        }
    </style>
</head>

<body>
    <div></div>
</body>

</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32

执行效果 : 网页中的 div 大小就是 200 像素 ;

在这里插入图片描述

2、代码示例 - translateZ 为 200 示例

在下面的代码中 , 设置了 500 像素的视距 ;

设置元素的 3D 转换属性为 :

            /* 设置 3D 转换 */
            transform: translateZ(200)
1
2

相当于在下图中 , 视距 ( 人眼距离成像平面距离 ) $d = 500$ 像素 , 物体距离成像平面距离 $Z = 200$ 像素 , 此时物体的大小在平面上的成像要大于本身的大小 ;
在这里插入图片描述

代码示例 :

<!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;
            margin: 100px auto;
            /* 设置 3D 转换 */
            transform: translateZ(200px)
        }
    </style>
</head>

<body>
    <div></div>
</body>

</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32

执行效果 : 网页中的 div 大小就远大于 200 像素 ;

在这里插入图片描述

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/编程变革者/article/detail/60307