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: ...
随机推荐
- Activity启动的四种方式
Activity启动方式有四种,分别是: standardsingleTopsingleTasksingleInstance 可以根据实际的需求为Activity设置对应的启动模式,从而可以避免创建大 ...
- CocoaPods学习系列2——使自己的项目支持CocoaPods管理
该篇记录使自己的项目支持CocoaPods管理. 要达到这一目的,需要如下步骤: 1.将自己的项目提交到github,添加开源协议license 2.添加podspec文件 3.验证podspec,成 ...
- LeetCode第[69]题(Java)：Sqrt(x)
题目:求平方根 难度:Easy 题目内容: Compute and return the square root of x, where x is guaranteed to be a non-neg ...
- JAVA 多线程轮流打印ABC
采用Thread+Semaphore实现,思路很简单 import java.io.IOException; import java.util.concurrent.Semaphore; public ...
- $1...$9 属性 (RegExp) (JavaScript)
返回在模式匹配期间找到的,所存储的最近的九个部分. 只读. RegExp.$n 参数 RegExp 始终为全局 RegExp 对象. n 1 至 9 之间的任意整数. 备注 每 ...
- angular-messages.js信息验证的使用
ngMessages(1.3+) 众所周知,表单和验证是Angular中复杂的组件之一.上面的例子不是特别好,不简洁.在Angular 1.3发布前,表单验证必须以这种方式编写.然而在发布的Angul ...
- lightoj1234调和级数+欧拉常数
数据比较小时直接算,数据比较大时用公式1+1/2+...+1/n=inn+C+1/(2*n) ,C是欧拉常数0.5772156649 刚开始用的这个1+1/2+...+1/n=in(n+1)+C, ...
- poj1986带权lca
lca求距离,带权值 的树上求lca,我是用倍增法求的,求两点之间的距离转化为到根节点之间的距离 (de了一个小时 的bug,重打居然就过了....) #include<map> #inc ...
- POJ 1062 限制点
http://poj.org/problem?id=1062 昂贵的聘礼 Time Limit: 1000MS Memory Limit: 10000K Total Submissions: 50 ...
- IOS-环信
一.即时通讯 即时通讯,又称实时通讯 即时通信(Instant Messaging,简称IM)是一个实时通信系统,允许两人或多人使用网络实时的传递文字消息.文件.语音与视频交流 即时通讯在开发中使用的 ...