利用Js+Css实现折纸动态导航效果实例源码

先来看看第一种实现方式

效果图如下：

不再采用ul li的布局方式

-webkit-transform-style:preserve-3d只对子元素有作用，所以每个div都加。

实例源码

.wrap{margin:30px auto;width:302px;-webkit-perspective:800px; -webkit-transform-style:preserve-3d; position:relative;}
.wrap div{ position:absolute; top:52px;left:0;-webkit-transform-style:preserve-3d; -webkit-transform-origin:top;}
.wrap span{ display:block;width:300px;border:1px solid #000;height:50px; font:16px/50px "宋体"; background:#ccc;}






 第一项
 
  第二项
  
   第三项
   
    第四项
    
    第五项
     
      第六项
      
第七项
      
     
    
   
  
 

总结

以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作能带来一定的帮助，如果有疑问大家可以留言交流。