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