Css—实现3D导航栏

一、背景

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

二、效果展示

三、思路解析

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

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

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

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

四、 代码总览

1、html部分

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部分

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()来移动那个面,移动到下边,来充当悬浮后翻起的那个面,这样就可以实现基本的布局。那么说到这里我们现在就差动态的效果了。

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

css 复制代码
.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

相关推荐
爱吃的强哥3 分钟前
vue3 使用 vite 管理多个项目,实现各子项目独立运行,独立打包
前端·javascript·vue.js
谈不譚网安12 分钟前
CSRF请求伪造
前端·网络安全·csrf
TT模板17 分钟前
苹果cmsV10主题 MXonePro二开优化修复开源版
前端·html5
拖孩18 分钟前
【Nova UI】十一、组件库中 Icon 组件的测试、使用与全局注册全攻略
前端·javascript·vue.js·ui·sass
去伪存真24 分钟前
不用动脑,手把手跟着我做,就能掌握Gitlab+Jenkins提交代码自动构部署
前端·jenkins
天天扭码1 小时前
深入解析 JavaScript 中的每一类函数:从语法到对比,全面掌握适用场景
前端·javascript·面试
小希爸爸1 小时前
4、中医基础入门和养生
前端·后端
kooboo china.1 小时前
Tailwind CSS 实战:基于 Kooboo 构建企业官网页面(一)
前端·css·编辑器
uhakadotcom1 小时前
Fluid:云原生数据加速与管理的简单入门与实战
前端
鬼面瓷2 小时前
CAPL编程_03
前端·数据库·笔记