【CSS3】CSS3 3D 转换 ⑤ ( 3D 呈现效果 - transform-style 属性 | transform-style 属性语法 | 设置透视视图效果 | 结构伪类选择器 )

作者：2023面试高手 | 2024-03-04 04:23:51

踩

文章目录

一、3D 呈现效果 - transform-style 属性
- 1、transform-style 属性语法
二、transform-style 属性示例

一、3D 呈现效果 - transform-style 属性

1、transform-style 属性语法

父盒子中如果有子盒子 , 假如父盒子有 3D 变换的效果 , 那么子盒子的 3D 效果则需要使用特殊的属性 transform-style 进行设置 ;

在 CSS3 样式中 , 使用 transform-style 属性定义在 3D 空间中呈现被 3D 转换的父元素元素的子元素是否继承父容器的 3D 变换效果 ;

transform-style 属性取值 :

flat : 默认属性值 , 子元素将不会单独保留 3D 位置 , 而是被扁平化到其父元素的 2D 平面 ; 此时即使对子元素应用了 3D 转换属性则不会生效 , 而是从属于父元素的 3D 变换属性 ;
preserve-3d : 设置为 preserve-3d 属性值时 , 子元素将保留其 3D 位置 , 父元素和子元素都可以在三个维度上分别进行不同的 3D 变换操作 , 如 : 移动和旋转 ;

二、transform-style 属性示例

1、核心要点

设置透视视图效果

默认情况下 , CSS3 的 3D 视图效果是正交视图效果 ,

正交视图 : 是等距视图 , 物体的大小 , 与视点与物体的距离无关 , 无论物体离多远 , 显示的都是一样大 ;
透视视图 : 有近小远大的效果 , 3D 效果必须要开启透视视图 ;

如果不开启透视视图 , 初始效果如下 :
在这里插入图片描述

鼠标移动上去后 , 显示效果如下 :

在这里插入图片描述
这是正交视图的效果 , 物体的大小与视点与物体距离无关 ;

开启透视视图效果 , 为标签盒子设置 perspective 属性即可 , 属性值是视点到投影平面的距离 ;

        body {
            /* 设置透视视图效果 */
            perspective: 500px;
        }
1
2
3
4

设置后的效果如下 :
在这里插入图片描述

设置父容器 3D 呈现效果

在父容器中 , 设置 transform-style: preserve-3d; 属性 , 令父盒子和子盒子使用不同的 3D 变换效果 , 否则子盒子将使用父盒子的 3D 效果 ;

        .box {
            position: relative;
            /* 宽度 和 高度 200 像素 */
            width: 200px;
            height: 200px;
            /* 距离顶部 100 像素, 水平方向居中 */
            margin: 100px auto;
            /* 绕 Y 轴旋转 */
            /* transform: rotateY(60deg); */
            /* 父盒子 和 子盒子 使用不同的 3D 变换效果 */
            transform-style: preserve-3d;
        }
1
2
3
4
5
6
7
8
9
10
11
12

结构伪类选择器

参考【CSS3】CSS3 结构伪类选择器 ( E:first-child / E:last-child 选择器 | E:nth-child(n) 选择器 | E:nth-of-type 选择器 ) 博客 ,

选择 .box 类标签下的第二个 div 子盒子 , 可以使用 .box div:last-child 或者 .box div:nth-child(2) 结构伪类选择器 ;

        .box div {
            /* 使用绝对定位 */
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: red;
        }
        
        .box div:last-child {
            /* 第二个子盒子 绕 X 轴旋转 60 度 */
            transform: rotateX(60deg);
            background-color: blue;
        }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

2、代码示例

代码示例 :

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <!-- 设置 meta 视口标签 -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no,maximum-scale=1.0,minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>transform-style 属性值设置 3D 呈现效果</title>
    <style>
        body {
            /* 设置透视效果 */
            perspective: 500px;
        }
        
        .box {
            position: relative;
            /* 宽度 和 高度 200 像素 */
            width: 200px;
            height: 200px;
            /* 距离顶部 100 像素, 水平方向居中 */
            margin: 100px auto;
            /* 绕 Y 轴旋转 */
            /* transform: rotateY(60deg); */
            /* 父盒子 和 子盒子 使用不同的 3D 变换效果 */
            transform-style: preserve-3d;
        }
        
        .box:hover {
            /* 鼠标移动到父盒子处 绕 Y 轴旋转 */
            transform: rotateY(60deg);
        }
        
        .box div {
            /* 使用绝对定位 */
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: red;
        }
        
        .box div:last-child {
            /* 第二个子盒子 绕 X 轴旋转 60 度 */
            transform: rotateX(60deg);
            background-color: blue;
        }
    </style>
</head>

<body>
    <div class="box">
        <div></div>
        <div></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
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59