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: ...
随机推荐
- LeetCode——Max Consecutive Ones
LeetCode--Max Consecutive Ones Question Given a binary array, find the maximum number of consecutive ...
- 服务器状态监控之snmp&ipmi
一.ipmi 1.简介 IPMI(Intelligent Platform Management Interface)即智能平台管理接口是使硬件管理具备"智能化"的新一代通用接口标 ...
- 求中位数，O(n)的java实现【利用快速排序折半查找中位数】
查找无序数组的中位数,要想时间复杂度为O(n)其实用计数排序就能很方便地实现,在此讨论使用快速排序进行定位的方法. 1.中位数定义 2.算法思想 3.Java代码实现 4.时间复杂度分析 5.附录 中 ...
- django Models 常用的字段和参数
1.字段 CharField IntegerField floatField DateTimeField DateField DecimalField 2.参数 null default choice ...
- java reflect反射---Java高级开发必须懂的
理解反射对学习Java框架有很大的帮助,如Spring框架的核心就是使用Java反射实现的,而且对做一些Java底层的操作会很有帮助. 一.Class类的使用 1.万事万物皆对象,( ...
- echarts的散点图
目前页面中有一个故障数据,做成散点图的效果,打算用echarts 来实现,国内的图表类其实选择挺多的,个人觉得echarts是比较好用的,来看看它有什么优点,一时中文的,联合百度地图,很多都对国内很友 ...
- 基于mysql的全文索引
支持引擎:mysql的MyISAM存储引擎和Innodb存储引擎(5.6及其以上)支持. 适用类型:char.varchar和text. 新建方法:ALTER TABLE article ADD F ...
- Jenkins构建shell
#!/bin/bash cd Labwfcm git pull cd wfcm-api mvn clean package cd target mv wfcm-api.war wfcm-api.war ...
- opencv:图像的掩码操作
示例代码: #include <opencv.hpp> using namespace cv; int main() { Mat src = imread("005.jpg&qu ...
- 配置 Web 组件服务器 IIS 证书
用 IIS 6 配置 Web 组件证书(对于 Windows Server 2003) 使用 IIS 管理器向 Web 组件服务器分配证书.对合并池配置中的 Standard Edition ...