文章目录
- 一、3D 导航栏示例 - 核心要点
- 1、需求分析
- 2、HTML 结构
- 3、CSS 样式
- 列表设置
- 开启透视视图
- 设置过渡动画
- 设置 3D 呈现样式
- 鼠标移动到控件上方效果
- 设置两个子盒子模型的效果
- 二、完整代码示例
- 1、代码示例
- 2、展示效果
一、3D 导航栏示例 - 核心要点
1、需求分析
实现如下功能 :
正面 和 底部 各有一个 盒子模型 , 鼠标移动到 正面 盒子模型 后 , 整个 盒子模型 的 父容器 绕 X 轴 旋转 90 度 , 向上翻转 90 度 , 显示底部的 盒子模型 ;
2、HTML 结构
HTML 结构如下 , 两个导航菜单在 <ul> 标签下的 <li> 标签 ;
显然 <li> 需要使用 左浮动 , 横向排列 ;
<body>
<ul>
<li>
<div class="box">
<div>正面1</div>
<div>底面1</div>
</div>
</li>
<li>
<div class="box">
<div>正面2</div>
<div>底面2</div>
</div>
</li>
</ul>
</body>
3、CSS 样式
列表设置
ul 下的 li 列表 需要设置 浮动效果 , 才能从左到右排列 ;
默认状态下 ul 下的 li 列表 每个列表项前面都有一个小圆点 , 需要使用 list-style: none 属性设置 , 取消 列表样式 ;
ul li {
/* 设置浮动效果 , 从左到右排列 */
float: left;
/* 取消列表样式 , 前面有一个小圆点 */
list-style: none;
}
开启透视视图
HTML 页面 呈现 3D 效果 , 需要 设置 3D 空间中的透视效果 属性 , 该属性的 属性值 表示 观察者眼睛 ( 视点 ) 到 3D 转换元素 ( 盒子标签模型 ) 的距离 , 单位是像素 ;
body {
/* 设置透视视图效果 */
perspective: 500px;
}
上述代码 告诉浏览器 , 观察者的眼睛 距离 投影平面 500 像素 , 在 这个距离会影响 3D 转换元素的视觉效果 , 具体效果就是 " 近小远大 " ;
如果不设置 透视视图效果 , 那么 整个 三维空间 中 , 不管多远 , 显示的 标签盒子 大小都一样 ;
设置过渡动画
如果需要 为 3D 变换过程 设置过渡时间 , 只需要 在 父盒子 中设置 transition 属性即可 , transition 属性 设置 盒子模型 属性值变化时的过渡效果 ;
/* 设置过渡动画 */
transition: all 0.5s;
上述代码 告诉浏览器 该 盒子模型 及 子盒子模型 所有 可过渡 的属性值在 0.5 秒内平滑地改变 ;
设置 3D 呈现样式
盒子模型 的 父容器 和 子容器 都可以设置 3D 变换效果 , 如果要为 子容器 设置 3D 变换效果 , 则需要在 父容器 的 盒子模型 样式中 设置 transform-style: preserve-3d; 属性 ,
/* 父盒子 和 子盒子 使用不同的 3D 变换效果 */
transform-style: preserve-3d;
上述代码 告诉 浏览器 子容器盒子模型 保留其的 3D 变换效果 , 即 子盒子模型 的 3D 效果 是 相对于它们自己的 3D 空间 , 而不是相对于父元素的平面 ;
鼠标移动到控件上方效果
:hover 是一个 伪类选择器 , 该选择器 表示 用户与页面进行交互的一种状态 , 即 鼠标指针停留在 盒子模型 上方时的一种状态 ;
.box:hover {
/* 鼠标移动到父盒子处 绕 X 轴旋转 , 正面躺下 */
transform: rotateX(90deg);
}
默认状态下 , .box 类型的盒子 显示的是 .box 类型 的 样式 , 如果将 鼠标移动到 盒子模型上方时 , 会显示 .box:hover 样式 ;
设置两个子盒子模型的效果
父容器中设置 相对定位 , 根据 子绝父相 原则 , 子盒子使用了绝对定位 , 父盒子就要使用相对定位 ;
第一个子容器 显示在正面 , 为了保证 X 轴是中心线 , 将正面盒子 沿着 Z 轴向 视点 移动 , 这样将整个 父盒子 进行 旋转时 , 旋转中心 恰好 是 中心位置 ;
第二个子容器 显示在底部 , 此时需要 绕 X 轴旋转 -90 度 ( 根据右手法则计算 ) , 正面向前扑倒 , 这样正面的字会显示在底部 ;
.box div:first-child {
/* 第一个子盒子 正常显示在正面 */
background-color: red;
/* 为了保证 X 轴是中心线 , 将正面盒子 沿着 Z 轴向 视点 移动 */
transform: translateZ(50px);
}
.box div:last-child {
/* 第二个子盒子 绕 X 轴旋转 -90 度 ,
正面向前扑倒 , 正面的字显示在底部
注意 : 先移动 后旋转 */
transform: translateY(50px) rotateX(-90deg);
background-color: blue;
}
二、完整代码示例
1、代码示例
<!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>3D 导航栏示例</title>
<style>
body {
/* 设置透视效果 */
perspective: 500px;
}
ul {
/* 上下 100 像素间距 , 左右居中 */
margin: 100px auto;
}
ul li {
/* 设置浮动效果 , 从左到右排列 */
float: left;
/* 上下 0 像素间距 , 左右 5 像素间距 */
margin: 0 5px;
/* 宽度 200 像素 , 高度 100 像素 */
width: 200px;
height: 100px;
/* 取消列表样式 , 前面有一个小圆点 */
list-style: none;
}
.box {
/* 子绝父相 该父容器 相对定位 , 子容器 绝对定位 */
position: relative;
/* 宽度 和 高度 占父容器 100% */
width: 100%;
height: 100%;
/* 设置过渡动画 */
transition: all 0.5s;
/* 父盒子 和 子盒子 使用不同的 3D 变换效果 */
transform-style: preserve-3d;
}
.box:hover {
/* 鼠标移动到父盒子处 绕 X 轴旋转 , 正面躺下 */
transform: rotateX(90deg);
}
.box div {
/* 使用绝对定位 */
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
/* 设置文字大小 */
font-size: 30px;
/* 设置文字颜色 */
color: #fff;
/* 设置文字在盒子中水平对齐 */
text-align: center;
/* 设置文字在盒子中垂直对齐 */
line-height: 100px;
}
.box div:first-child {
/* 第一个子盒子 正常显示在正面 */
background-color: red;
/* 为了保证 X 轴是中心线 , 将正面盒子 沿着 Z 轴向 视点 移动 */
transform: translateZ(50px);
}
.box div:last-child {
/* 第二个子盒子 绕 X 轴旋转 -90 度 ,
正面向前扑倒 , 正面的字显示在底部
注意 : 先移动 后旋转 */
transform: translateY(50px) rotateX(-90deg);
background-color: blue;
}
</style>
</head>
<body>
<ul>
<li>
<div class="box">
<div>正面1</div>
<div>底面1</div>
</div>
</li>
<li>
<div class="box">
<div>正面2</div>
<div>底面2</div>
</div>
</li>
</ul>
</body>
</html>
2、展示效果
默认状态如下 :
鼠标 移动到 第一个 盒子上面时 , 开始向上翻转 ;
翻转完成的效果 , 底面展示在上面 ;
综合效果如下 :
