css实现三维折叠多级菜单效果代码-html代码-BFW代码库

css实现三维折叠多级菜单效果代码

代码语言：html

代码描述：css实现三维折叠多级菜单效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开


<!DOCTYPE html>
<html lang="en" >

<head>

  <meta charset="UTF-8">

  <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/font-awesome-4.7.0/css/font-awesome.min.css">
  
  
<style>


        *{
                margin: 0;
                padding: 0;
                list-style:none;
        }
        html{
                width: 100%;
                height: 100%;
        }
        body{
                width: 100%;
                height: 100%;
                background-image: linear-gradient(55deg, #fed, #ccc, #abd);
        }
        .wrapper{
                width: 100%;
                height: 100%;
                perspective: 700px;
        }
        nav{
                position: absolute;
                width: 8em;
                height: 20em;
                top: 0;
                bottom: 0;
                left: 0;
                right: 0;
                margin: auto;
                transform: rotateX(36deg) rotateY(20deg) rotateZ(-6deg);
                transform-style:preserve-3d;
                transition: transform 1s;
        }
        nav ul{
                transform-style:preserve-3d;
        }
        nav ul li{
                background-color: #555;
                position: relative;
                border-radius: 5px 5px 5px 5px;
                margin: .5em;
                box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.7);
        }
        nav ul li a{
                display:block;
                text-decoration:none;
                text-align:center;
                color: #aaa;
                font-size: 2em;
                line-height: 2em;
        }

        nav ul li ul{
                p.........完整代码请登录后点击上方下载按钮下载查看