制作3D旋转导航

最新推荐文章于 2022-08-23 18:27:53 发布

HM_Sunny

最新推荐文章于 2022-08-23 18:27:53 发布

阅读量478

点赞数

分类专栏：前端文章标签： CSS3

本文链接：https://blog.youkuaiyun.com/HM_Sunny/article/details/80791218

版权

前端专栏收录该内容

2 篇文章

订阅专栏

根据变形transform和过渡transition等内容，实现如下3D旋转动画下拉导航

HTML部分代码如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>制作3D旋转导航</title>
	</head>
	<body>
		<div id="nav">
			<ul class="nav-menu clearfix unstyled">
				<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">Service
					<span class="three-d-box">
						<span class="front">Service</span>
						<span class="back">Service</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="clearfix unstyled 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>

css部分代码如下：

<style type="text/css">
			@import url("https://www.w3cplus.com/demo/css3/base.css");
			@font-face {
				font-family:'sansationregular';
				src: url('https://www.w3cplus.com/demo/css3/3DAnimationDropdownMenu/sansation_regular-webfont.eot');
				src: url('https://www.w3cplus.com/demo/css3/3DAnimationDropdownMenu/sansation_regular-webfont.eot?#iefix') format('https://www.w3cplus.com/demo/css3/3DAnimationDropdownMenu/embedded-opentype'),
					 url('https://www.w3cplus.com/demo/css3/3DAnimationDropdownMenu/sansation_regular-webfont.woff') format('woff'),
					 url('https://www.w3cplus.com/demo/css3/3DAnimationDropdownMenu/sansation_regular-webfont.ttf') format('truetype'),
					 url('https://www.w3cplus.com/demo/css3/3DAnimationDropdownMenu/sansation_regular-webfont.svg#sansationregular') format('svg');
				font-weight: normal;
				font-style: normal;
			}
			body{
				background-color: #edecec;
			}
			ul,li{
				list-style: none outside none;  /*去除列表前面的标志*/
			}
			/* basic menu styles */
			.nav-menu{
				display: block;
				background: #74adaa;
				width: 951px;
				margin: 50px auto 150px;
			}
			.nav-menu > li{   /*设置成内联元素，每个距离右侧1px，相对定位*/
				display: inline;
				float: left;
				border-right: 1px solid #94c0be;
				position: relative;
			}
			.nav-menu > li:last-child{
				border-radius: none;
			}
			.nav-menu li a{
				color: #FFFFFF;
				display: block;
				text-decoration: none;
				font-family: 'sansationregular';
				-webkit-font-smoothing: antialiased;
				-moz-font-smoothinf:antialiased;
				font-smoothing:antialiased;
				text-transform: capitalize;
				overflow: visible;
				line-height: 20px;
				font-size: 20px;
				padding: 15px 30px 15px 31px;
			}
		/* animation domination */
			.three-d{
				-webkit-perspective: 200px;
				-moz-perspective: 200px;
				-ms-perspective: 200px;
				-o-perspective:200px;
				perspective: 200px;
				-webkit-transition: all .7s linear;
				-moz-transition: all .7s linear;
				-ms-transition: all .7s linear;
				-o-transition: all .7s linear;
				transition: all .7s linear;
				position: relative;
			}
			.three-d:not(.active):hover{
				cursor: pointer;
			}
			.three-d:not(.active):hover .three-d-box,
			.three-d:not(.active):focus .three-d-box{
				-webkit-transform: translateZ(-25px) rotateX(90deg);
				-moz-transform: translateZ(-25px) rotateX(90deg);
				-o-transform: translateZ(-25px) rotateX(90deg);
				-ms-transform: translateZ(-25px) rotateX(90deg);
				transform: translateZ(-25px) rotateX(90deg);
			}
			.three-d-box {
				-webkit-transition: all .3s ease-out;
				-moz-transition: all .3s ease-out;
				-ms-transition: all .3s ease-out;
				-o-transition: all .3s ease-out;
				transition: all .3s ease-out;
				-webkit-transform: translatez(-25px);
				-moz-transform: translatez(-25px);
				-ms-transform: translatez(-25px);
				-o-transform: translatez(-25px);
				transform: translatez(-25px);
				-webkit-transform-style: preserve-3d;
				-moz-transform-style: preserve-3d;
				-ms-transform-style: preserve-3d;
				-o-transform-style: preserve-3d;
				transform-style: preserve-3d;
				-webkit-pointer-events: none;
				-moz-pointer-events: none;
				-ms-pointer-events: none;
				-o-pointer-events: none;
				pointer-events: none;
				position: absolute;
				top: 0;
				left: 0;
				display: block;
				width: 100%;
				height: 100%;
				}
			.front{
				-webkit-transform: rotateX(0deg) translatez(25px);
				-moz-transform: rotateX(0deg) translatez(25px);
				-ms-transform: rotateX(0deg) translatez(25px);
				-o-transform: rotateX(0deg) translatez(25px);
				transform: rotateX(0deg) translatez(25px);
			}
			.back{
				-webkit-transform: rotateX(-90deg) translatez(25px);
				-moz-transform: rotateX(-90deg) translatez(25px);
				-ms-transform: rotateX(-90deg) translatez(25px);
				-o-transform: rotateX(-90deg) translatez(25px);
				transform: rotateX(-90deg) translatez(25px);
				color: #FFE7C4;
			}
			.front, .back{
				display: block;
				width: 100%;
				height: 100%;
				position: absolute;
				top: 0;
				left: 0;
				background: #74ADAA;
				padding: 15px 30px 15px 31px;
				color: white;
				-webkit-pointer-events: none;
				-moz-pointer-events: none;
				-ms-pointer-events: none;
				-o-pointer-events: none;
				pointer-events: none;
				-webkit-box-sizing: border-box;
				box-sizing: border-box;
			}
			.nav-menu li .active .front,
			.nav-menu li .active .back,
			.nav-menu li a:hover .front,
			.nav-menu li a:hover .back {
				background-color: #51938f;
				-webkit-background-size: 5px 5px;
				background-size: 5px 5px;
				background-position: 0 0, 30px 30px;
				background-image: -webit-linear-gradient(45deg, #478480 25%, transparent 25%, transparent 75%, #478480 75%, #478480), linear-gradient(45deg, #478480 25%, transparent 25%, transparent 75%, #478480 75%, #478480);
				background-image: -moz-linear-gradient(45deg, #478480 25%, transparent 25%, transparent 75%, #478480 75%, #478480), linear-gradient(45deg, #478480 25%, transparent 25%, transparent 75%, #478480 75%, #478480);
				background-image: -ms-linear-gradient(45deg, #478480 25%, transparent 25%, transparent 75%, #478480 75%, #478480), linear-gradient(45deg, #478480 25%, transparent 25%, transparent 75%, #478480 75%, #478480);
				background-image: -o-linear-gradient(45deg, #478480 25%, transparent 25%, transparent 75%, #478480 75%, #478480), linear-gradient(45deg, #478480 25%, transparent 25%, transparent 75%, #478480 75%, #478480);
				background-image: linear-gradient(45deg, #478480 25%, transparent 25%, transparent 75%, #478480 75%, #478480), linear-gradient(45deg, #478480 25%, transparent 25%, transparent 75%, #478480 75%, #478480);
				}
			.nav-menu ul {
				position: absolute;
				left: -40px;
				text-align: left;
				line-height: 40px;
				font-size: 14px;
				width: 200px;
				-webkit-transition: all 0.3s ease-in;
				-moz-transition: all 0.3s ease-in;
				-ms-transition: all 0.3s ease-in;
				-o-transition: all 0.3s ease-in;
				transition: all 0.3s ease-in;
				-webkit-transform-origin: 0px 0px;
				-moz-transform-origin: 0px 0px;
				-ms-transform-origin: 0px 0px;
				-o-transform-origin: 0px 0px;
				transform-origin: 0px 0px;
				-webkit-transform: rotateX(-90deg);
				-moz-transform: rotateX(-90deg);
				-ms-transform: rotateX(-90deg);
				-o-transform: rotateX(-90deg);
				transform: rotateX(-90deg);
				-webkit-backface-visibility: hidden;
				-moz-backface-visibility: hidden;
				-ms-backface-visibility: hidden;
				-o-backface-visibility: hidden;
				backface-visibility: hidden;
				}
			.nav-menu > li:hover ul {
				display: block;
				-webkit-transform: rotateX(0deg);
				-moz-transform: rotateX(0deg);
				-ms-transform: rotateX(0deg);
				-o-transform: rotateX(0deg);
				transform: rotateX(0deg);
				}
		</style>