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: ...
随机推荐
- Limit CPUID MAX
Limit CPUID MAX to 3.是指出现在英特尔平台的BIOS设置选项.很多主板也显示成CPUID maximum value limit选项.中文意义是:限制执行CPUID指令返回数值大于 ...
- pbs "ll: command not found"
可以用 ls -ltr 替代 ll
- Git如何进行分支管理？
Git如何进行分支管理? 1.创建分支 创建分支很简单:git branch <分支名> 2.切换分支 git checkout <分支名> ...
- 理解Java中字符流与字节流的区别（转）
1. 什么是流 Java中的流是对字节序列的抽象,我们可以想象有一个水管,只不过现在流动在水管中的不再是水,而是字节序列.和水流一样,Java中的流也具有一个“流动的方向”,通常可以从中读入一个字节序 ...
- scjp考试准备 - 9 - 多态
题目为如下代码的执行结果: abstract class Vehicle{ public int speed(){ return 0; } } class Car extends Vehicle{ p ...
- qtjambi_编译
ZC: 写文章时间为 20160716 1. 1.1.在 Win7x64中编译不成功,主要原因是 源码中包含的程序generator.exe出现内存错误 ==> 于是,转到 虚拟机XPsp3中编 ...
- Coundn't load memtrack module (No such file or directory)
Coundn't load memtrack module (No such file or directory) 去仔细看日志,是包名有问题 一.出现症状 提示找logcat logcat里面发现C ...
- selenium学习笔记（xpath和css定位）
简单的介绍下xpath和css的定位 理论知识就不罗列了 还是利用博客园的首页.直接附上代码: 这个是xpath #!/usr/bin/env python # -*- coding: utf_8 - ...
- storm 入门介绍（持续更新）
storm的集群表面上看和hadoop的集群非常像.但是在Hadoop上面你运行的是MapReduce的Job, 而在Storm上面你运行的是Topology.它们是非常不一样的 — 一个关键的区别是 ...
- Django Celery Redis 异步执行任务demo实例
一.windows中安装redis 安装过程见 <在windows x64上部署使用Redis> 二.环境准备 requirements.txt Django==1.10.5 celery ...