HTML 页面 呈现 3D 效果 , 需要 设置 3D 空间中的透视效果 属性 , 该属性的 属性值 表示 观察者眼睛 ( 视点 ) 到 3D 转换元素 ( 盒子标签模型 ) 的距离 , 单位是像素 ;
body {
/* 设置透视视图效果 */
perspective: 500px;
}
上述代码 告诉浏览器 , 观察者的眼睛 距离 投影平面 500 像素 , 在 这个距离会影响 3D 转换元素的视觉效果 , 具体效果就是 " 近小远大 " ;
如果不设置 透视视图效果 , 那么 整个 三维空间 中 , 不管多远 , 显示的 标签盒子 大小都一样 ;
如果需要 为 3D 变换过程 设置过渡时间 , 只需要 在 父盒子 中设置 transition 属性即可 , transition 属性 设置 盒子模型 属性值变化时的过渡效果 ;
/* 设置过渡动画 */
transition: all 0.5s;
上述代码 告诉浏览器 该 盒子模型 及 子盒子模型 所有 可过渡 的属性值在 0.5 秒内平滑地改变 ;
盒子模型 的 父容器 和 子容器 都可以设置 3D 变换效果 , 如果要为 子容器 设置 3D 变换效果 , 则需要在 父容器 的 盒子模型 样式中 设置 transform-style: preserve-3d;
属性 ,
/* 父盒子 和 子盒子 使用不同的 3D 变换效果 */
transform-style: preserve-3d;
上述代码 告诉 浏览器 子容器盒子模型 保留其的 3D 变换效果 , 即 子盒子模型 的 3D 效果 是 相对于它们自己的 3D 空间 , 而不是相对于父元素的平面 ;
:hover
是一个 伪类选择器 , 该选择器 表示 用户与页面进行交互的一种状态 , 即 鼠标指针停留在 盒子模型 上方时的一种状态 ;
.box:hover {
/* 鼠标移动到父盒子处 绕 Y 轴旋转 */
transform: rotateY(180deg);
}
默认状态下 , .box
类型的盒子 显示的是 .box
类型 的 样式 , 如果将 鼠标移动到 盒子模型上方时 , 会显示 .box:hover
样式 ;
父容器中设置 相对定位 , 根据 子绝父相 原则 , 子盒子使用了绝对定位 , 父盒子就要使用相对定位 ;
第一个子容器 显示在正面 , 正常设置即可 ;
第二个子容器 显示在背面 , 此时需要 绕 Y 轴 翻转 180 度 , 才能贴到背面 ;
.box {
/* 父盒子属性设置 */
/* 设置相对定位
子绝父相 子盒子使用了绝对定位 父盒子就要使用相对定位 */
position: relative;
/* 父盒子 和 子盒子 使用不同的 3D 变换效果 */
transform-style: preserve-3d;
}
.box div:first-child {
/* 使用绝对定位 */
position: absolute;
}
.box div:last-child {
/* 使用绝对定位 */
position: absolute;
/* 第二个子盒子 ( 背面盒子 ) 绕 Y 轴旋转 180 度
这样旋转后显示 背面 文字不会翻转 */
transform: rotateY(180deg);
}
<!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;
/* 设置过渡动画 */
transition: all 0.5s;
/* 父盒子 和 子盒子 使用不同的 3D 变换效果 */
transform-style: preserve-3d;
}
.box:hover {
/* 鼠标移动到父盒子处 绕 Y 轴旋转 */
transform: rotateY(180deg);
}
.box div:first-child,
.box div:last-child {
/* 设置文字大小 */
font-size: 30px;
/* 设置文字颜色 */
color: #fff;
/* 设置文字在盒子中水平对齐 */
text-align: center;
/* 设置文字在盒子中垂直对齐 */
line-height: 100px;
}
.box div:first-child {
/* 使用绝对定位 */
position: absolute;
top: 0%;
left: 0%;
width: 50%;
height: 50%;
background-color: red;
/* 设置第一个盒子显示在最顶部 */
/* z-index: 1; */
}
.box div:last-child {
/* 使用绝对定位 */
position: absolute;
top: 50%;
left: 50%;
width: 50%;
height: 50%;
background-color: blue;
/* 第二个子盒子 ( 背面盒子 ) 绕 Y 轴旋转 180 度
这样旋转后显示 背面 文字不会翻转 */
transform: rotateY(180deg);
}
</style>
</head>
<body>
<!--
父盒子 中两个子盒子 分别是正面 和 背面
翻转的是 父盒子 不是 两个子盒子
-->
<div class="box">
<div>正面</div>
<div>背面</div>
</div>
</body>
</html>
默认的 正面 显示效果 :
鼠标移动到 盒子模型 上之后 , 会 绕 Y 轴 翻转 180 度 , 此时显示背面 , 展示效果如下 :