Css—实现3D导航栏

news2024/11/29 17:12:19

一、背景

最近在其他的网页中看到了一个很有趣的3d效果，这个效果就是使用css3中的3D转换实现的，所以今天的内容就是3D的导航栏效果。那么话不多说，直接开始主要内容的讲解。

二、效果展示

三、思路解析

1、首先我们需要将这个导航使用一个大的盒子包裹，方便管理整体；

2、每一块的效果都是独立的，所以需要单独设置其效果；

3、这个效果是当鼠标悬浮的时候，会向上翻动，鼠标离开自动弹回

基本的思路已经介绍完了，那么接下来就开始代码的实现和解析。

四、代码总览

1、html部分

<div class="box">
      <ul class="box_nav">
        <li>
          <div class="nav_front">Home</div>
          <div class="nav_top">Home</div>
        </li>
        <li>
          <div class="nav_front">Services</div>
          <div class="nav_top">Services</div>
        </li>
        <li>
          <div class="nav_front">Products</div>
          <div class="nav_top">Products</div>
        </li>
        <li>
          <div class="nav_front">Blog</div>
          <div class="nav_top">Blog</div>
        </li>
        <li>
          <div class="nav_front">Contact</div>
          <div class="nav_top">Contact</div>
        </li>
        <li>
          <div class="nav_front">About Us</div>
          <div class="nav_top">About Us</div>
        </li>
      </ul>
    </div>

首先我们就来介绍一下我的实现思路，先从结构说起，通过上边的效果展示不难看出，这里一定是有两个面的，或者说是至少需要两个面才可以实现这个效果，在这里我选择了使用无序列表来充当最外层的大盒子，来实现3d的效果，然后每个li就是一个独立的个体，在li中包裹了两个div来实现两个平面，这样基本的结构元素就齐全了。

那么接下来我们就需要想一下如何实现翻转的效果，第一步就需要将这两个盒子重叠起来，然后通过3d属性来设置他们的位置，目前先抛开动态效果不说，我们想来实现一下，解下来就来看一下css部分

2、CSS部分

html,body{
  margin: 0;
  padding: 0;
}
.box{
  width: 100%;
  height: 100vh;
  background-color: #ccc;
  display: flex;
}
.box_nav{
  margin: auto;
  list-style: none;
  width: 770px;
  height: 35px;
  display: flex;
 
}
.box_nav>li{
  cursor: pointer;
  width: 120px;
  height: 35px;
  line-height: 35px;
  margin: 0px 5px;
  text-align: center;
  transition: all .5s;
  position: relative;
  transform-style: preserve-3d;
  
}
.nav_front{
  width: 120px;
  height: 35px;
  background-color: rgb(48, 172, 164);
  transform: translateZ(17.5px);
  font-size: 14px;
}
.nav_top{
  width: 120px;
  height: 35px;
  background: linear-gradient(to top , #256b65,#38b0a8);
  position: absolute;
  top: 0px;
  left: 0px;
  transform: translateY(17.5px) rotateX(-90deg);
  font-size: 14px;
}
.box_nav>li:hover{
  transform: rotateX(90deg);
}

首先我们先来处理一下之后可能会影响我们布局的内外边距，处理之后我们就来实现，这里我们使用到了flex布局，将li横向排列，实现基本的布局，然后我们需要将nav_front和nav_top设置固定的合适的宽高，注意：这里不必和我设置的一样，我只实现基本的效果

至于将两个面重叠起来，我们就需要使用到定位属性，来将两个面实现分层处理，这个时候我们就可以轻松的发现，我们只需要将在下面的那个盒子旋转为与我们桌子平行的样子就就可以了，注意，这里需要使用translateY（）来移动那个面，移动到下边，来充当悬浮后翻起的那个面，这样就可以实现基本的布局。那么说到这里我们现在就差动态的效果了。

动态效果就全靠这条属性的定义了

.box_nav>li:hover{
  transform: rotateX(90deg);
}

语义就是，以x轴作为旋转轴将整个li进行旋转90度，这样就可以实现效果了，当然只设置这个就会很僵硬，所以我们呢需要配合过渡属性来缓和效果，这样就实现了基础了3d导航栏的效果。

五、结语

今天的分享就到这里了，如果您觉得这篇文章还不错，请点赞、分享给更多的朋友吧！同时，也欢迎关注我的博客，获取更多精彩内容。

本人刚刚组件了社区，大家社区中后续会持续更新一些其他的内容，大家可以加入一下。
https://bbs.csdn.net/forums/fe46c651de82465696aeabef266b0476?joinKey=xndsi3pgxkw2-wn5z0y463k-1-446fd82212de589eead88d47f7b7dabbhttps://bbs.csdn.net/forums/fe46c651de82465696aeabef266b0476?joinKey=xndsi3pgxkw2-wn5z0y463k-1-446fd82212de589eead88d47f7b7dabb