Css—实现3D导航栏

一、配景

        近来在其他的网页中看到了一个很风趣的3d效果，这个效果就是利用css3中的3D转换实现的，以是本日的内容就是3D的导航栏效果。那么话不多说，直接开始重要内容的解说。
二、效果展示

 三、思绪分析

   1、起首我们必要将这个导航利用一个大的盒子包裹，方便管理团体；
  2、每一块的效果都是独立的，以是必要单独设置其效果；
  3、这个效果是当鼠标悬浮的时间，会向上翻动，鼠标离开自动弹回
  根本的思绪已经先容完了，那么接下来就开始代码的实现和分析。
四、 代码总览

1、html部门

1. <div class="box">
2.       <ul class="box_nav">
3.         <li>
4.           <div class="nav_front">Home</div>
5.           <div class="nav_top">Home</div>
6.         </li>
7.         <li>
8.           <div class="nav_front">Services</div>
9.           <div class="nav_top">Services</div>
10.         </li>
11.         <li>
12.           <div class="nav_front">Products</div>
13.           <div class="nav_top">Products</div>
14.         </li>
15.         <li>
16.           <div class="nav_front">Blog</div>
17.           <div class="nav_top">Blog</div>
18.         </li>
19.         <li>
20.           <div class="nav_front">Contact</div>
21.           <div class="nav_top">Contact</div>
22.         </li>
23.         <li>
24.           <div class="nav_front">About Us</div>
25.           <div class="nav_top">About Us</div>
26.         </li>
27.       </ul>
28.     </div>

复制代码

        起首我们就来先容一下我的实现思绪，先从结构提及，通过上边的效果展示不丢脸出，这里肯定是有两个面的，大概说是至少必要两个面才可以实现这个效果，在这里我选择了利用无序列表来充当最外层的大盒子，来实现3d的效果，然后每个li就是一个独立的个体，在li中包裹了两个div来实现两个平面，如许根本的结构元素就齐备了。
   那么接下来我们就必要想一下怎样实现翻转的效果，第一步就必要将这两个盒子重叠起来，然后通过3d属性来设置他们的位置，现在先抛开动态效果不说，我们想来实现一下，解下来就来看一下css部门
   2、CSS部门

1. html,body{
2.   margin: 0;
3.   padding: 0;
4. }
5. .box{
6.   width: 100%;
7.   height: 100vh;
8.   background-color: #ccc;
9.   display: flex;
10. }
11. .box_nav{
12.   margin: auto;
13.   list-style: none;
14.   width: 770px;
15.   height: 35px;
16.   display: flex;
18. }
19. .box_nav>li{
20.   cursor: pointer;
21.   width: 120px;
22.   height: 35px;
23.   line-height: 35px;
24.   margin: 0px 5px;
25.   text-align: center;
26.   transition: all .5s;
27.   position: relative;
28.   transform-style: preserve-3d;
29.   
30. }
31. .nav_front{
32.   width: 120px;
33.   height: 35px;
34.   background-color: rgb(48, 172, 164);
35.   transform: translateZ(17.5px);
36.   font-size: 14px;
37. }
38. .nav_top{
39.   width: 120px;
40.   height: 35px;
41.   background: linear-gradient(to top , #256b65,#38b0a8);
42.   position: absolute;
43.   top: 0px;
44.   left: 0px;
45.   transform: translateY(17.5px) rotateX(-90deg);
46.   font-size: 14px;
47. }
48. .box_nav>li:hover{
49.   transform: rotateX(90deg);
50. }

复制代码

  起首我们先来处理处罚一下之后大概会影响我们结构的表里边距，处理处罚之后我们就来实现，这里我们利用到了flex结构，将li横向分列，实现根本的结构，然后我们必要将nav_front和nav_top设置固定的符合的宽高，注意：这里不必和我设置的一样，我只实现根本的效果
  至于将两个面重叠起来，我们就必要利用到定位属性，来将两个面实现分层处理处罚，这个时间我们就可以轻松的发现，我们只必要将在下面的谁人盒子旋转为与我们桌子平行的样子就就可以了，注意，这里必要利用translateY（）来移动谁人面，移动到下边，来充当悬浮后翻起的谁人面，如许就可以实现根本的结构。那么说到这里我们现在就差动态的效果了。
        动态效果就端赖这条属性的界说了

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

复制代码

 语义就是，以x轴作为旋转轴将整个li举行旋转90度，如许就可以实现效果了，固然只设置这个就会很僵硬，以是我们呢必要共同过渡属性来和缓效果，如许就实现了根本了3d导航栏的效果。
五、结语

        本日的分享就到这里了，假如您以为这篇文章还不错，请点赞、分享给更多的朋侪吧！同时，也接待关注我的博客，获取更多精彩内容。

   本人刚刚组件了社区，各人社区中后续会连续更新一些其他的内容，各人可以参加一下。