制作3D旋转导航

最新推荐文章于 2022-08-23 18:27:53 发布
最新推荐文章于 2022-08-23 18:27:53 发布
阅读量442 收藏 1
点赞数
分类专栏： 前端 文章标签： CSS3
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/HM_Sunny/article/details/80791218
版权

根据变形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>

HM_Sunny
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
html导航3D效果,css3超酷3D旋转导航菜单特效
weixin_42437253的博客
06-04 585
这是一款使用纯 CSS3 制作的3D旋转导航菜单特效。该3D旋转导航菜单特效中主要使用了CSS 3D Transforms技术。该插件在IE内核的浏览器中看不到效果。HTML结构要制作这种效果需要创建一个3D对象。我们使用无序列表来制作导航菜单，每一个列表项都带一个超链接标签，在它里面包含有4个span元素。每一个span代表立方体的一个面(不包括侧面)。我们需要做的是将每一个面都放置到正确的位置...
css3超酷3D旋转导航菜单特效
12-13
这是一款使用纯CSS3制作的3D旋转导航菜单特效。该3D旋转导航菜单特效中主要使用了CSS 3D Transforms技术。当鼠标hover菜单项时，菜单项会以3D立方体的方式旋转。
3D旋转导航
qq_42849542的博客
01-18 526
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> ul { margin: 0; padding: 0; list-style: none; } .
html5--6-51 阶段练习3-旋转导航
weixin_33912453的博客
12-10 99
html5--6-51 阶段练习3-旋转导航   1 @charset="UTF-8"; 2 ul{ 3 list-style: none; 4 font-size:24px; 5 font-weight: bold; 6 } 7 8 a{ 9 text-decoration: none; 10 } 11 ...
jQuery css3制作3D旋转图标导航特效
11-19
jQuery css3制作3D旋转图标导航特效 jQuery css3制作3D旋转图标导航特效 jQuery css3制作3D旋转图标导航特效 jQuery css3制作3D旋转图标导航特效
3D球状旋转旋转tag
02-23
在IT行业中，3D技术已经广泛应用于各种场景，如游戏开发、虚拟现实、动画制作以及用户界面设计等。"3D球状旋转旋转tag"是一个特定的术语，它可能指的是在一个应用或项目中，标签（tag）以3D球形布局进行动态旋转展示...
jquery 3D球状导航的文章分类
10-29
标题中的“jQuery 3D球状导航”是指一种使用jQuery库创建的三维视觉效果，将网站的导航菜单设计成一个球形布局，...实现这样的导航系统需要对Web前端技术有深入理解，包括DOM操作、CSS3变换、事件处理以及动画制作等。
jQuery 3d旋转木马
10-08
**jQuery 3D旋转木马**是一种通过JavaScript库jQuery实现的动态展示效果，它借助了GreenSock的TweenMax插件来创造出引人入胜的3D视觉体验。这个旋转木马设计适用于现代浏览器，如Chrome和Safari，它们对3D变换支持...
3D效果的导航条
05-24
3D效果的导航条，有代码，效果非常好看。
CSS3 3D导航栏旋转切换代码
06-24
CSS3 3D导航栏旋转切换代码是一款基于css3 transform属性制作的绿色导航栏鼠标悬停3D翻转切换特效。
3D导航栏效果
07-14
3D导航栏效果
jQuery制作可拖动圆形旋转弹出导航菜单效果
08-08
jQuery制作可拖动圆形旋转弹出导航菜单效果
有旋转动画的导航菜单栏源码
11-08
两个导航菜单栏源码。包括3D旋转导航效果和普通旋转角度的导航效果。使用CSS3的新特性transform和transition来实现的动画效果。
3D导航栏 鼠标点击旋转90度
qq_43737549的博客
08-23 237
3D导航栏，重点是定义.box盒子 .son1 .son2的宽高然后子绝父相调整位置，让.son2一开始沿着X轴负方向旋转90度，由于一开始.son1,.son2旋转是垂直交叉的，所以要让.son1沿着Z轴移动半个盒子的距离，让.son2向下移动半个盒子的距离。
css3基础-制作3D旋转导航综合练习题
superjunjin的专栏
07-04 705
https://www.imooc.com/code/1883 &amp;lt;!doctype html&amp;gt; &amp;lt;html lang=&quot;en&quot;&amp;gt; &amp;lt;head&amp;gt; &amp;lt;meta charset=&quot;UTF-8&quot;&amp;gt; &amp;lt;ti
用css3实现3D立体翻转导航
weixin_44541250的博客
01-28 521
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ 开发工具与关键技术：dw 作者：张海锋 撰写时间：2019-01-27 ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ html代码： &lt;body&gt...
3D 导航栏实现
qq_45287715的博客
05-11 831
3D导航栏的实现 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <tit
css 3d旋转滚筒列表
最新发布
09-12
这种效果常用于制作时尚的导航菜单或页面特效。 要实现CSS 3D旋转滚筒列表，首先需要创建一个包含多个列表项的父容器。然后，通过设置父容器的样式为“perspective”和“perspective-origin”属性来创建3D空间效果...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值