css3中做3D导航栏
看别人做的一个3D导航栏，觉得很厉害，这里先保存下来，后面有时间好好分析一下：
<!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:"fontt";
src: url("http://www.imooc.com/Amaranth-BoldItalic.otf");
}
body {
background-color:#edecec;
} /* basic menu styles */
.nav-menu {
display: block;
width:950px;
margin: 50px auto 150px;
}
.nav-menu > li {
display:inline;
float:left;
border-right:1px solid #edecec;
}
.nav-menu > li:last-child {
border-right: none;
}
.nav-menu li a {
color: #fff;
display: block;
text-decoration: none;
/*调用本地字体*/
font-family:fontt;
-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;
/*任务三 设置a元素.three-d为距离200px的3D舞台
perspective理论是用户通过屏幕看到3D元素的距离，以像素px为单位
*/ /*任务四、设置3D舞台布景过渡效果*/
transition:all 0.3s 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);
/*
translateZ改变3D元素的Z轴高度，以用户看屏幕为准
X是左右，Y是上下，Z可以理解为自身的深度,对于用户就是前后(屏幕距离)
如果3D元素X轴旋转90度后，Z轴以用户看屏幕就变成了上下,
X轴依旧是左右,Y轴变成了前后(屏幕距离)。
这里没图说不清楚，看个人理解吧
这里再次设置translateZ(-25px)是因为获取焦点后
不会保留原本的translateZ数值 rotateX改变3D元素的X轴角度,比如把这个元素横着插一根牙签，然后旋转
(怎么转自己想，难道还能左右转)
*/
} .three-d-box {
/*任务六、给3D舞台中“.three-d-box”设置过渡与变形效果*/
transition:all 0.3s linear;
transform:translateZ(-25px);
/*这里先设置translateZ(-25px)是为了子元素旋转效果需求，
不然会造成拉近屏幕(深度)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;
/*规定如何在3D空间呈现子元素,(是否3D视图)*/
-webkit-pointer-events: none;
-moz-pointer-events: none;
-ms-pointer-events: none;
-o-pointer-events: none; pointer-events: none;
/*pointer-events设置元素对于鼠标事件的限制*/
position: absolute;
top: 0;
left: 0;
display: block;
width: 100%;
height: 100%;
} /*任务七、给导航设置3D前，与3D后变形效果*/
.front {/*这个是未获取焦点时显示的那一面(正面)*/
transform:rotateX(0deg) translateZ(25px);
/*设置正面X轴不旋转(默认不转可以不设置)
translateZ(25px)拉近正面深度距离，目的是不与背面重合
*/
} .back {/*这个是获取焦点旋转后的那一面(底下货值背面)*/
transform:rotateX(-90deg) translateZ(25px);
/*设置背面X轴旋转-90度，
translateZ(25px)因为已经旋转了，所以Z轴变成了上下，
因为旋转的是-90 ， 反向，所以Z轴25px是向下，
设置Z轴是为了和正面的底边接触，而不是正面的中点(一横)
*/
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-size: 5px 5px;
background-position: 0 0, 30px 30px;
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;
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);
/*这里-90deg是先把下拉旋转90度，形成隐藏的假象*/
-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;
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>
<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">
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>
<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">
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>
效果如下：
css3中做3D导航栏的更多相关文章
- 如何做一个导航栏————浮动跟伪类（hover）事件的应用
我们先说一下伪类选择器的写法: 写法:选择器名称:伪类状态{}4 常见伪类状态: 未访问:link 鼠标移上去:hover 激活选定:active 已访问:visited 获得焦点的时候触发:focu ...
- CSS3中的3D动画实现(钟摆、魔方)--实现代码
CSS3中的3D动画实现(钟摆.魔方) transition-property 过渡动画属性 all|[attr] transition-duration 过渡时间 transition-delay ...
- css3制作炫酷导航栏效果
今天主要利用hover选择器.鼠标滑过查看效果. 一.普通导航栏 Home Content Service Team Contact 对于这种普通的导航栏,只是鼠标滑过的时候颜色会变,所以思路变得很简 ...
- 在UWP中页面滑动导航栏置顶
最近在研究掌上英雄联盟,主要是用来给自己看新闻,顺便copy个界面改一下段位装装逼,可是在我copy的时候发现这个东西 当你滑动到一定距离的时候导航栏会置顶不动,这个特性在微博和淘宝都有,我看了@ms ...
- CSS3中2D/3D转换、过渡、动画
转换.过渡.动画 2D 转换 1.translate() 方法 通过 translate() 方法,元素从其当前位置移动,根据给定的 left(x 坐标) 和 top(y 坐标) 位置参数: 实例 d ...
- CSS3特效----制作立体导航栏菜单
使用CSS3实现下图的导航菜单效果 <!doctype html> <html lang="en"> <head> <meta chars ...
- 在CSS中定义【导航栏】超链接样式
1.案例css代码 <style> .divcss5 a:link{ color:#F00}/* 链接默认为红色 */ .divcss5 a:hover{ color:#000}/* 鼠标 ...
- css3实现动态圆形导航栏
核心问题: 1.圆形怎样实现? css3的圆角属性:border-radius:__ px; 把值设大点就圆啦. 2.怎样实现动画效果? css3的transition属性:transition:__ ...
- ul li做横向导航栏例子
/* ul li以横排显示 */ /* 所有class为menu的div中的ul样式 */ div.menu ul { list-style:none; /* 去掉ul前面的符号 */ margin: ...
随机推荐
- 记一次如何解决低版本jar包里面的bug，不适宜替换成高版本的经历
背景:目前正在迭代开发的项目,应用户要求新增一个电子文档转换的功能,即将不标准的excel文件转换为标准的excel文件(标准模板). 选择:pio ,本项目里面本来就有poi的jar包 问题:项目里 ...
- EF Code-First 学习之旅 一对多的关系
public class Student { public Student() { } public int StudentId { get; set; } public string Student ...
- 十二道MR习题 - 2 - 多文件保存
题目: 需要将MR的执行结果保存到3个文件中,该怎么做. 又是一个送分题. 对于Hadoop的MapReduce来说只需要设置一下reduce任务的数量即可.MR的Job默认reduce数量是1,需要 ...
- Red Hat OpenStack 10的新特性
这是Red Hat有史以来最好的版本,同时也是第一个长生命周期版本(最长五年支持),这篇文章会介绍为什么这是你私有云最好的礼物. 由于要使用命令行,以前安装OpenStack是很繁重的工作.这个版本提 ...
- .Net Core使用jexus配置https
今天搞了一下怎么从http换成https,写一篇博客记录该过程.关于jexus的安装和使用请看我之前的一篇博客<Jexus部署Asp.Net Core项目>,唯一的不同是,将jexus升级 ...
- 卸载mac多余的音频驱动：internal audio driver corel painter
$ kextstat | grep corel 130 0 0xffffff7f81042000 0x4000 0x4000 com.corel.painter.PainterAudioDriver ...
- python 超时异常处理
异常处理具体见:[循序渐进学Python]9.异常处理 环境平台:Python2.7.9 + Win8.1 本篇记录一下自己写爬虫的遇到的问题,程序中批量获取图片地址,然后批量保存.由于没有设置网址打 ...
- Linux：配置Linux网络和克隆虚拟机并更改配置
Linux学习笔记1:配置Linux网络和克隆虚拟机并更改配置 一.配置Linux网络 在安装Linux的时候,一定要保证你的物理网络的IP是手动设置的,要不然会在Linux设置IP连通网络的时候 ...
- Tiny210用户手册笔记
核心板 CPU 处理器: Samsung S5PV210,基于 CortexTM-A8,运行主频 1GHz 内置 P ...
- Visual Studio 2013中用VSIX创建项目模版
我会一步一步解释: 我的一个项目里有5个工程, 我想用其中的4个去创建一个新的工具模版,我还想把他们都放到一个文件夹下面当我用这个模版创建新的工程时.注意我的初始化项目,我想把他们转换成一个模版(我不 ...