看完练习3D导航，写了个简易版，有助理解

看了练习3D导航转换，着实一脸懵逼，看了近两天时间，写了个小的3D转换，此代码相对较少，比较容易理解；

    
 
 
 
     li{width:200px;list-style: none;}
     a{
  text-decoration: none;
  display: block;
  font-size: 20px;
  line-height: 20px;
  padding: 15px 30px 15px 31px;
  color: #fff;  
  position: relative; 
  perspective: 200px;      
  text-align: center;
     }   
     .tD-box{
  display: block;
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;    
  top: 0;
  transition: all .3s ease-out;
  transform: translateZ(-25px);    
  -webkit-transform-style: preserve-3d;  
  -moz-transform-style: preserve-3d;
  -ms-transform-style: preserve-3d;
  -o-transform-style: preserve-3d;
  transform-style: preserve-3d;
     }    
     .front{
  background: #006666;
  transform:rotateX(0deg) translateZ(25px);  
     }
     .back{
  transform:rotateX(-90deg) translateZ(25px);
  }
     .front,.back{
  display: block;
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top:0;
  padding: 15px 30px 15px 31px;
  -webkit-pointer-events: none;  
  -moz-pointer-events: none;
  -ms-pointer-events: none;
  -o-pointer-events: none;
  pointer-events: none;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  }
     .back{
background-color: #51938f;
background-size: 5px 5px;
background-position: 0 0, 30px 30px;
background-color: #aba09e;
background-image: -webkit-linear-gradient(top left, #aba09e, #818181);
background-image: -o-linear-gradient(top left, #aba09e, #818181);
background-image: linear-gradient(to bottom right, #aba09e, #818181);
     }
     a:hover .tD-box{  
  transform: translateZ(-25px) rotateX(90deg);  
     }   
 
    
    
 
     

  

      Home
      HomeHome