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.........完整代码请登录后点击上方下载按钮下载查看