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{
		position: absolute;
		top: 0;
		width: 100%;
		transform: rotateY(-20deg);
		transform-style:preserve-3d;
	}
	nav ul li ul li{
		width: 100%;
		position: absolute;
		margin: 0;
	}
	nav ul li ul .m1{
		opacity:0;
		top: 0;
		left: .5em;
		transform-origin: center right;
		transform: perspective(200px) rotateY(180deg);
		transition: transform .3s .6s, opacity .1s .6s;
	}
	nav ul li ul .m2{
		opacity:0;
		top: 0em;
		left: 7.5em;
		margin-top: .5em;
		transform-origin: bottom center;
		transform: perspective(200px) rotateX(-180deg);
		transition: transform .3s .4s, opacity .1s .4s;
	}
	nav ul li ul .m3{
		opacity:0;
		top: 5em;
		left: 7.5em;
		transform-origin: bottom center;
		transform: perspective(200px) rotateX(-180deg);
		transition: transform .3s .2s, opacity .1s .2s;
	}
	nav ul li:hover ul .m1{
		opacity:1;
		left: .5em;
		top: 0em;
		transform-origin: center right;
		transform: perspective(200px) rotateY(-180deg);
		transition: transform .3s .2s, opacity .1s .3s;
	}
	nav ul li:hover ul .m2{
		opacity:1;
		top: 0em;
		left: 7.5em;
		transform: perspective(200px) rotateX(180deg);
		transform-origin: bottom center;
		transition: transform .3s .4s, opacity .1s .5s;
	}
	nav ul li:hover ul .m3{
		opacity:1;
		top: 5em;
		left: 7.5em;
		transform: perspective(200px) rotateX(180deg);
		transform-origin: bottom center;
		transition: transform .3s .6s, top 0s 1s, opacity .1s .7s;
	}
	nav ul li ul .l1{
		opacity:0;
		top: 0;
		left: -.5em;
		transform-origin: center left;
		transform: perspective(200px) rotateY(-180deg);
		transition: opacity .1s .8s, transform .3s .8s;
	}
	nav ul li ul .l2{
		opacity:0;
		top: -.5em;
		left: -7.5em;
		transform-origin: top center;
		transform: perspective(200px) rotateX(180deg);
		transition: opacity .1s .6s, transform .3s .6s;
	}
	nav ul li ul .l3{
		opacity:0;
		top: -5em;
		left: -7.5em;
		transform-origin: top center;
		transform: perspective(200px) rotateX(180deg);
		transition: opacity .1s .4s, transform .3s .4s;
	}
	nav ul li ul .l4{
		opacity:0;
		top: -9.5em;
		left: -7.5em;
		transform-origin: top center;
		transform: perspective(200px) rotateX(180deg);
		transition: opacity .1s .2s, transform .3s .2s;
	}
	nav ul li:hover ul .l1{
		opacity:1;
		left: -.5em;
		transform-origin: center left;
		transform: perspective(200px) rotateY(180deg);
		transition: opacity .1s .........完整代码请登录后点击上方下载按钮下载查看