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

最新推荐文章于 2025-03-29 18:08:07 发布

韩曙亮

最新推荐文章于 2025-03-29 18:08:07 发布

阅读量1.7k

点赞数 29

分类专栏： CSS 文章标签： css3 3d 前端 3D 3D呈现效果透视视图正交视图

本文链接：https://blog.csdn.net/shulianghan/article/details/136376219

版权

CSS 专栏收录该内容

142 篇文章

订阅专栏

本文详细介绍了CSS3中的transform-style属性，包括其语法、如何设置透视视图效果、父容器与子元素的3D变换独立性以及结构伪类的应用。通过代码示例展示了如何在实际项目中使用这些技巧来创建更丰富的3D视觉效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、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;
        }

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

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