文章目录
- 一、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>
复制
展示效果 :
鼠标移动上去后变为 :