3D导航栏实现

最新推荐文章于 2022-06-28 11:30:32 发布

原创最新推荐文章于 2022-06-28 11:30:32 发布 · 792 阅读

1 ·

CC 4.0 BY-SA版权

css 专栏收录该内容

2 篇文章

订阅专栏

本文介绍了一个使用HTML、CSS3实现的3D旋转导航菜单案例。通过设置3D舞台的透视、过渡效果及变形，使得导航菜单在悬停时产生翻转动画，并展示了如何在导航项下展开二级下拉菜单。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!doctype html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>3D旋转导航</title>
		<style>
			@import url("http://www.w3cplus.com/demo/css3/base.css");
			/*任务一：引入本地字体文件*/
			@font-face {
				font-family: 'sansationregular';
				src: url('http://www.w3cplus.com/demo/css3/3DAnimationDropdownMenu/sansation_regular-webfont.eot');
				src: url('http://www.w3cplus.com/demo/css3/3DAnimationDropdownMenu/sansation_regular-webfont.eot?#iefix') format('http://www.w3cplus.com/demo/css3/3DAnimationDropdownMenu/embedded-opentype'),
					 url('http://www.w3cplus.com/demo/css3/3DAnimationDropdownMenu/sansation_regular-webfont.woff') format('woff'),
					 url('http://www.w3cplus.com/demo/css3/3DAnimationDropdownMenu/sansation_regular-webfont.ttf') format('truetype'),
					 url('http://www.w3cplus.com/demo/css3/3DAnimationDropdownMenu/sansation_regular-webfont.svg#sansationregular') format('svg');
				font-weight: normal;
				font-style: normal;
			}
			body {
				background-color:#edecec;
			}

			/* basic menu styles */
			.nav-menu {
			  display: block;
				width:950px;
				margin: 50px auto 150px;
			}
			.nav-menu > li {
			  display: inline;
			  float:left;			
			}
			.nav-menu > li:last-child {
			  border-right: none;
			}
			.nav-menu li a {
			  color: #fff;
				display: block;
				text-decoration: none;
			  /*调用本地字体*/
				font-family: 'sansationregular';
				font-smoothing: antialiased;
				text-transform: capitalize;
				overflow: visible;
				line-height: 20px;
				font-size: 20px;
				padding: 15px 30px 15px 31px;			
			}

			/* animation domination */
			.three-d {
			  /* 任务三、设置3D舞台布景 */
			  perspective: 200px;
			  /*任务四、设置3D舞台布景过渡效果*/
			  transition: all 7s linear;/*全部属性，持续时间，函数（匀速），推迟时间*/
			  position: relative;
			}

			.three-d:not(.active):hover {
			  cursor: pointer;/*鼠标变手*/
			}
			/*任务五、给不是当前状态的3D舞台的悬浮与聚焦状态设置变形效果*/
			/*focus*/
			.three-d:not(.active):hover .three-d-box{
			  transform: translateZ(-25px) rotateX(90deg);
			}/*translate平移，正数向正方向；rotate旋转，X时正数从下往上翻，Y从左往右翻，Z顺时针翻*/

			.three-d-box {
			  /*任务六、给3D舞台中“.three-d-box”设置过渡与变形效果*/
			  transition: all .3s ease-out;
			  transform: translateZ(-25px);
			  transform-style: preserve-3d;/*应用于舞台元素，使其产生3D效果*/
			  position: absolute;
			  top: 0;
			  left: 0;
			  display: block;
			  width: 100%;
			  height: 100%;
			}
			/*任务七、给导航设置3D前，与3D后变形效果*/
			.front {
			  transform: rotatex(0deg) translatez(25px);
			}

			.back {
			  transform: rotatex(-90deg) translatez(25px);
			  color: #FFE7C4;
			}

			.front, .back {
			  display: block;
				width: 100%;
				height: 100%;
				position: absolute;
				top: 0;
				left: 0;
				background: #7CCD7C;
				padding: 15px 30px 15px 31px;	
				color: white;
			  pointer-events: none;
			  box-sizing: border-box;/*自适应宽度，根据父元素和边框大小，自动计算内容宽度，实用！*/
			}

			.nav-menu ul {
			  	position: absolute;
				text-align: left;
				line-height: 40px;
				font-size: 14px;
				width: 200px;
				 transition: all 0.3s ease-in;
				 transform-origin: 0px 0px;/*设置变形开始的原点*/
				 transform: rotateX(-90deg);
				 backface-visibility: hidden;/*定义元素补面向屏幕时是否可见visible*/
			}
			/*任务九、显示下拉导航菜单，并其设置一个变形效果*/
			.nav-menu > li:hover ul {
			  display: block;
				transform: rotateX(0deg);
			}
			.nav-menu li .active .front,
			.nav-menu li .active .back,
			.nav-menu li a:hover .front,
			.nav-menu li a:hover .back {
			  background-color: #6E8B3D;}/*设置颜色*/
		</style>
	</head>
	<body>
		<div id="nav">
			<ul class="nav-menu">
				<li><a href="#" class="three-d active">
					Home
					<span class="three-d-box"><span class="front">Home</span><span class="back">Home</span></span>
				</a></li>
				<li><a href="#" class="three-d">
					Services
					<span class="three-d-box"><span class="front">Services</span><span class="back">Services</span></span>
				</a></li>
				<li><a href="#" class="three-d">
					Products
					<span class="three-d-box"><span class="front">Products</span><span class="back">Products</span></span>
				</a></li>
				<li><a href="#" class="three-d">
					About
					<span class="three-d-box"><span class="front">About</span><span class="back">About</span></span>
				</a></li>
				<li><a href="#" class="three-d">
					Contact
					<span class="three-d-box"><span class="front">Contact</span><span class="back">Contact</span></span>
				</a></li>
				<li><a href="#" class="three-d">
					Blog
					<span class="three-d-box"><span class="front">Blog</span><span class="back">Blog</span></span>
				</a>
					<ul class="drop-menu">
						<li><a href="#" class="three-d">
								Html5
								<span class="three-d-box"><span class="front">Html5</span><span class="back">Html5</span></span>
							</a></li>
							<li><a href="#" class="three-d">
								Css3
								<span class="three-d-box"><span class="front">Css3</span><span class="back">Css3</span></span>
							</a></li>
							<li><a href="#" class="three-d">
								JavaScript
								<span class="three-d-box"><span class="front">JavaScript</span><span class="back">JavaScript</span></span>
							</a></li>
							<li><a href="#" class="three-d">
								Videogames
								<span class="three-d-box"><span class="front">Videogames</span><span class="back">Videogames</span></span>
							</a></li>
					</ul>
				</li>
				<li><a href="#" class="three-d">
					Shop On-line
					<span class="three-d-box"><span class="front">Shop On-line</span><span class="back">Shop On-line</span></span>
				</a></li>
			</ul>
		</div>
	</body>
</html>