CSS3实现3D旋转菜单导航

最新推荐文章于 2022-07-07 16:54:05 发布
最新推荐文章于 2022-07-07 16:54:05 发布
阅读量5.4k 收藏 14
点赞数
分类专栏： CSS/CSS3 HTML/HTML5 文章标签： 导航 css3 3d
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/lynch0571/article/details/49278059
版权

一、效果图






二、代码


<!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;
        	background: #74adaa;
        	width:950px;
        	margin: 50px auto 150px;
        }
        .nav-menu > li {
          display: inline;
          float:left;			
        	border-right:1px solid #94c0be;
        }
        .nav-menu > li:last-child {
          border-right: none;
        }
        .nav-menu li a {
          color: #fff;
        	display: block;
        	text-decoration: none;
          /*调用本地字体*/
        	font-family: 'sansationregular';
          -webkit-font-smoothing: antialiased;
        	-moz-font-smoothing: antialiased;
        	font-smoothing: antialiased;
        	text-transform: capitalize;
        	overflow: visible;
        	line-height: 20px;
        	font-size: 20px;
        	padding: 15px 30px 15px 31px;			
        }
        
        
        .three-d {

          /* 设置3D舞台布景 */
        	perspective:200px;
        	-o-perspective:200px;
        	-webkit-perspective:200px;
        	-moz-perspective:200px;
        	-ms-perspective:200px;

          /*设置3D舞台布景过渡效果*/
        	transition:all 0.7s linear;
        	-o-transition:all 0.7s linear;
        	-ms-transition:all 0.7s linear;
        	-moz-transition:all 0.7s linear;
        	-webkit-transition:all 0.7s linear;
          position: relative;
        }
        
        .three-d:not(.active):hover {
          cursor: pointer;
        }
        
        /*给不是当前状态的3D舞台的悬浮与聚焦状态设置变形效果*/
        .three-d:not(.active):hover .three-d-box, 
        .three-d:not(.active):focus .three-d-box {
        	transform:translateZ(-25px) rotateX(90deg);
        	-o-transform:translateZ(-25px) rotateX(90deg);
        	-ms-transform:translateZ(-25px) rotateX(90deg);
        	-moz-transform:translateZ(-25px) rotateX(90deg);
        	-webkit-transform:translateZ(-25px) rotateX(90deg);

        }
        
        .three-d-box {
          /*给3D舞台中“.three-d-box”设置过渡与变形效果*/
			transform:translateZ(-25px);
        	-o-transform:translateZ(-25px);
        	-ms-transform:translateZ(-25px);
        	-moz-transform:translateZ(-25px);
        	-webkit-transform:translateZ(-25px);

        	transition:all .3s ease-out;
        	-o-transition:all .3s ease-out;
        	-ms-transition:all .3s ease-out;
        	-moz-transition:all .3s ease-out;
        	-webkit-transition:all .3s ease-out;


          -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%;
        }
        
        /*给导航设置3D前，与3D后变形效果*/
        .front {
        	transform:rotateX(0deg) translateZ(25px);
        	-ms-transform:rotateX(0deg) translateZ(25px);
        	-o-transform:rotateX(0deg) translateZ(25px);
        	-moz-transform:rotateX(0deg) translateZ(25px);
        	-webkit-transform:rotateX(0deg) translateZ(25px);
         }
        
        .back {
        	transform:rotateX(-90deg) translateZ(25px);
        	-ms-transform:rotateX(-90deg) translateZ(25px);
        	-o-transform:rotateX(-90deg) translateZ(25px);
        	-moz-transform:rotateX(-90deg) translateZ(25px);
        	-webkit-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;
        	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);
        	/*background-image: -webkit-linear-gradient(45deg,#434238 25%,transparent 25%,transparent 75%,#434238 75%,#434238),-ms-linear-gradient(45deg,#434238 25%,transparent 25%,transparent 75%,#434238 75%,#434238),-moz-linear-gradient(45deg,#434238 25%,transparent 25%,transparent 75%,#434238 75%,#434238),-o-linear-gradient(45deg,#434238 25%,transparent 25%,transparent 75%,#434238 75%,#434238),linear-gradient(45deg,#434238 25%,transparent 25%,transparent 75%,#434238 75%,#434238);*/
        }
        .nav-menu ul {
          position: absolute;
        	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>
</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">
				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="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>


3D菜单特效(CSS3)
08-16
3D菜单特效(CSS3)
css3超酷3D旋转导航菜单特效
12-13
本案例中，我们关注的是"css3超酷3D旋转导航菜单特效"，这是一个利用CSS3 3D Transforms技术实现的创新性交互设计。这个特效使得网站的导航菜单在用户悬停时展现出立体的旋转效果，增强了用户体验和视觉吸引力。 ...
一款非常棒的纯CSS3 3D菜单演示及制作教程
weixin_33922672的博客
05-28 211
这段时间比较忙，很久没在这里分享一些漂亮的HTML5和CSS3资源了，今天起的早，看到一款很不错的CSS3 3D菜单，觉得非常上眼，就将它分享给大家，顺便来分析一下实现的源码。下面是效果图： 看了效果图是不是觉得它是一副麻将，对，第一眼我也认为是用CSS3写的麻将特效，结果我错了，它只是长得比较像而已。 另外，你也可以在这里直接查看菜单的DEMO演示。 接下来再分析一下实现这款3D菜单的...
一款非常棒的CSS 3D下拉式菜单实现-Makisu
weixin_30246221的博客
10-29 167
日期：2012-10-26来源：GBin1.com 说到折叠效果，曾经我们介绍过一款oriDomi折纸效果的javascript类库，它是一款JavaScript类库，可以把页面中任何HTML元素生成折叠效果。在今天我们介绍的文章中，使用CSS3D菜单作为一个jQuery插件，它可以自动转换成任何一款列表中的元素。在今天的文章中，我们介绍一款非常棒的3D效果下拉式菜单-Makisu，它独有的...
CSS3旋转菜单
pengyaou的博客
11-19 176
示例演示以及原文
旋转菜单（基于CSS3动画transform）
chen__cheng的博客
05-09 1178
效果预览： 实现思路： 设置小菜单的旋转基点transform-origin为中间圆的中心，再根据对小菜单设置不同的旋转角度即可。 实现代码： html <ul> <li><span>旋</span></li> <li><span>转</span></li> <li><span>菜</span></li> <li&
纯CSS3炫酷3D菜单 菜单项3D旋转动画
04-16
解压密码：RJ4587 不久前，我们刚刚为大家分享过很多外观各异的CSS3菜单，很多都是...今天要介绍的也是一款基于纯CSS3的3D菜单，当我们将鼠标滑过菜单项时，菜单项就会实现3D的旋转动画，另外菜单项是垂直的显示的。
CSS3 3D导航栏旋转切换代码
07-24
本篇将详细解析“CSS3 3D导航栏旋转切换代码”这一主题，探讨如何利用CSS3的transform属性来创建一个具有3D效果的动态导航栏，并在鼠标悬停时实现平滑的翻转切换。 首先，3D转换是CSS3的一个核心特性，允许元素在3D...
css3立体旋转菜单.zip
07-04
然后，我们转向`style.css`文件，这是实现3D旋转菜单的关键。首先，我们需要为父级容器添加`perspective`属性，并设置适当的值，如`1000px`。接着，为每个子项应用`transform-style: preserve-3d;`，这将使子元素在...
CSS3 3D旋转动画菜单
weixin_30587025的博客
12-02 132
在线演示 本地下载 转载于:https://www.cnblogs.com/qixidi/p/10052430.html
css3旋转的环形菜单动画特效
11-04
css3旋转的环形菜单动画特效 css3旋转的环形菜单动画特效
HTML5/CSS3 3D下拉折叠菜单 3D子菜单
08-23
这回要分享的是一款很有特色的CSS3菜单，它不仅具有下拉菜单的特点，而且，下拉的子菜单是3D的折纸效果，看起来是挺酷而且简单的HTML5/CSS3下拉菜单。回顾之前分享的菜单，HTML5/CSS3 3D下拉折叠菜单这款菜单和今天分享的类似，不过那个有下拉的动画效果。
菜单旋转_CSS3 3D旋转下拉菜单
weixin_39999222的博客
01-15 162
插件简介这是一款带有3D动画特效的CSS3菜单，该菜单有以下几个特点：首先菜单是基于CSS3的，因此浏览器兼容性都还可以；其次这款菜单支持二级下拉菜单，功能上也基本能满足大部分开发者；最后这款菜单最大的亮点在于展开下拉菜单时，子菜单可以旋转的展开和收缩，给人3D的视觉效果。插件预览插件下载在线演示链接：https://www.html5tricks.com/demo/jquery-3d-...
CSS实现3D菜单效果【每日一题】
功能总结
07-07 273
以下是今天小练习的最终效果，代码，我贴在下面了，大家可以自行练习。HTML完整代码： CSS完整代码： 以上就是【每日一练】的全部内容，希望今天的小练习对你有用，如果你觉得有帮助的话，请点赞我，关注我...
旋转CSS3下拉菜单
cuken7684698822的博客
08-02 410
Whirling CSS3 dropdown menu CSS3 menu. Various dropdown menus can be easily created with CSS3 with the help of selectors. Just connect your imagination – and you will create a truly new and unique de...
旋转导航栏
臧小川的博客
05-27 203
效果图 JS import React, { useState } from 'react'; import styles from './style.less' const index = () => { const [navData, setNavData] = useState([ { name: '文旅', id: 1, rotate: 0 }, { name: '卫生', id: 2, rotate: 60 }, { name:
3D环形旋转菜单
Mr_Shil的博客
08-12 1656
效果图 <template> <div> <div class="area" ref="area"> <div class="ball ball1"> <img ref="img" src="../../assets/bi_img/home2/icon01.png" alt="" /> </div> <div class="ball ball2">
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值