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

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

2024-04-29 12:04:16 前端知识 前端哥 928 244 我要收藏

文章目录

  • 一、3D 呈现效果 - transform-style 属性
    • 1、transform-style 属性语法
  • 二、transform-style 属性示例
    • 1、核心要点
      • 设置 透视视图 效果
      • 设置 父容器 3D 呈现效果
      • 结构伪类选择器
    • 2、代码示例





一、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 视图效果是 正交视图效果 ,

正交视图 与 透视视图 可以参考 【Unity3D】正交视图与透视视图 ( 正交视图概念 | 透视视图概念 | 观察点 | 正交视图作用 | 摄像机广角设定 | 透视畸变效果 ) 博客 ;

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

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

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

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


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

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

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

设置 父容器 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;
        }

结构伪类选择器

参考 【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;
        }

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>

展示效果 :
在这里插入图片描述

鼠标移动上去后变为 :

在这里插入图片描述

转载请注明出处或者链接地址:https://www.qianduange.cn//article/6374.html
评论
发布的文章

HTML5本地存储

2024-05-06 09:05:10

HTML5和CSS3新特性

2024-04-16 17:04:36

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!