简单3D导航栏案例-鼠标经过盒子时底部盒子旋转
最近入门学习前端用简单的html结构加CSS样式写了个3D导航栏的小案例在这里分享给大家。一、案例介绍？
效果如下:
二、案例代码
1.HTML结构
代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<ul class="navbar">
<li>
<div class="case">
<span class="front">首页</span>
<a href="#" class="bottom">进入</a>
</div>
</li>
<li>
<div class="case">
<span class="front">子页面1</span>
<a href="#" class="bottom">进入</a>
</div>
</li>
<li>
<div class="case">
<span class="front">子页面2</span>
<a href="#" class="bottom">进入</a>
</div>
</li>
<li>
<div class="case">
<span class="front">子页面3</span>
<a href="#" class="bottom">进入</a>
</div>
</li>
<li>
<div class="case">
<span class="front">子页面4</span>
<a href="#" class="bottom">进入</a>
</div>
</li>
<li>
<div class="case">
<span class="front">子页面5</span>
<a href="#" class="bottom">进入</a>
</div>
</li>
<li>
<div class="case">
<span class="front">子页面6</span>
<a href="#" class="bottom">进入</a>
</div>
</li>
<li>
<div class="case">
<span class="front">子页面7</span>
<a href="#" class="bottom">进入</a>
</div>
</li>
<li>
<div class="case">
<span class="front">子页面8</span>
<a href="#" class="bottom">进入</a>
</div>
</li>
<li>
<div class="case">
<span class="front">子页面9</span>
<a href="#" class="bottom">进入</a>
</div>
</li>
<li>
<div class="case">
<span class="front">子页面10</span>
<a href="#" class="bottom">进入</a>
</div>
</li>
<li>
<div class="case">
<span class="front">子页面11</span>
<a href="#" class="bottom">进入</a>
</div>
</li>
<li>
<div class="case">
<span class="front">子页面12</span>
<a href="#" class="bottom">进入</a>
</div>
</li>
</ul>
</body>
</html>
2.CSS样式
代码如下：
/* 清除内外边距 */
* {
margin: 0;
padding: 0;
}
.navbar {
width: 1200px;
height: 34px;
margin: 100px auto;
border: 1px solid rgba(0, 0, 0, .3);
/* 边框设置 */
border-radius: 10px;
}
.navbar li {
float: left;
margin: 0 5px;
width: 80px;
height: 34px;
font-size: 13px;
list-style: none;
/* 让li下面的子盒子都有透视效果 */
perspective: 600px;
}
.navbar li a {
/* 去除进入链接下面的下划线 */
text-decoration: none;
}
.case {
position: relative;
width: 100%;
height: 100%;
/* 使得子盒子上的文字都居中显示 */
text-align: center;
line-height: 34px;
/* 由于子级元素设置了3D效果，如果父级这里不加这个属性的话子级的3D效果就不会显示出来 */
transform-style: preserve-3d;
/* 加一个旋转的过渡效果 */
transition: all .6s;
}
.case:hover {
/* 经过盒子则旋转90度显示下方的盒子 */
transform: rotateX(90deg);
}
.front,
.bottom {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
}
.front {
/* z-index 属性指定一个元素的堆叠顺序，让需要初始显示的盒子堆叠顺序更高。 */
z-index: 1;
/* 往我们的面前移动所以是正的并且移动盒子高度的一半使得可以绕着中心点旋转 */
transform: translateZ(17px);
color: #666;
}
.bottom {
/* 往前倒必须是负值因为旋转上去底部的盒子字体要是正对我们的 */
/* 往下走高度的一半 */
/* 如果有移动或者其他的样式必须先写我们的移动 */
transform: translateY(17.5px) rotateX(-90deg);
color: orange;
}
这里是结构与样式分离将上面的CSS样式命名为style.css然后用link导入到html文件中即可以用，也可以将样式用style标签写到html文件里的title下。