原生js+css3 实现3D导航栏实例

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus®">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>3D动画导航栏</title>
<style>
     *{
        margin:0;
       padding:0;
   }
     body{
        overflow:visible;
       perspective:189993px;/*景深*/
   }
     .nav{
         display:flex;/*弹性盒模型*/
       top:100px;
       left:500px;
       margin:100px 0 0 278px;/*外边距：上右下左*/
   }
     .tab{
         width:200px;
       height:300px;
   }
   .content{
         width:300px;
       height:300px;
       margin-left:20px;
         position:relative;/*建立坐标系*/
       transform-style:preserve-3d;
         transform:rotateX(-90deg);
       transition:0.5s/*css3动画过渡时间：描述当前元素属性发生变化的时候，变化的慢一点*/
   }
   .tab1,.tab2,.tab3{
         width:200px;
       height:100px;
       text-align:center;
       line-height:100px;
       color:#fff;
       font-weight:bold;
   }
   .tab1{
         background-color:#06d6a0;
   }
   .tab2{
         background-color:#1b9aaa;
   }
   .tab3{
         background-color:#ef476f;
   }

   .content1,.content2,.content3{
         width:300px;
       height:300px;
       line-height:300px;
       text-align:center;
       position:absolute;
       color:#fff;
       font-weight:bold;
   }

   .content1{
          line-height:50px;
          background-color:#06d6a0;
          transform:translateY(-150px) rotateX(90deg);
   }
   .content2{
          background-color:#1b9aaa;
          transform:translateZ(150px)
   }
   .content3{
         background-color:#ef476f;
       transform:translateY(150px) rotateX(-90deg);
   }
</style>
</head>
<body>
     <div class="nav">
         <div class="tab">
             <div class="tab1" id="tab1">我</div>
           <div class="tab2" id="tab2">遇见</div>
           <div class="tab3" id="tab3">你</div>
       </div>
         <div class="content" id="content">
             <div class="content1" id="content1"><br><br>一天辛苦了<br>生活总是非常的忙碌<br></div>
           <div class="content2" id="content2">但我期望遇见你的日子里</div>
           <div class="content3" id="content3">可以慢下来！晚安</div>
       </div>
   </div>
   <script>
        var oContent=document.getElementById("content");
        var otab1=document.getElementById("tab1");
       var otab2=document.getElementById("tab2");
       var otab3=document.getElementById("tab3");
       otab1.addEventListener("click",function(){
             oContent.style.transform="rotateX(-90deg)";
       })

       otab2.addEventListener("click",function(){
              oContent.style.transform="rotateX(0deg)";
       })

       otab3.addEventListener("click",function(){
             oContent.style.transform="rotateX(90deg)";
       })
   </script>
</body>
</html>

显示：

原生js+css3 实现3D导航栏实例

猜你喜欢