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: ...
随机推荐
- 初入Spring-boot(一)
一.利用eclipse快速创建Spring-boot项目 1.首先去http://start.spring.io网站,勾选所需要的starter,如图: 选择完之后下载该文件,打开后发现是一个正常的m ...
- matplotlib之散点图
环境:windows系统,anaconda3 64位,python 3.6 1.初认识 基本代码如下: import numpy as np import matplotlib.pyplot as p ...
- Hyper：基于Hypervisor的容器化解决方案
近日,初创公司HyperHQ发布了他们的开源项目Hyper,Hyper是一个可以在hypervisor上运行Docker镜像的引擎,它融合了Docker容器和虚拟机的优点,旨在打造一个性能更好.更安全 ...
- HIVE- SCD缓慢变化
SCD缓慢变化维,比如一个用户维表,用户属性会变化,但是不会变化很剧烈,可能一年只会变化一两次,也不会所有用户的属性都会有变化,只有少量的数据发生变化,所以叫缓慢变化维.这种问题就是由于维度的变化所造 ...
- shell read
#!/bin/bash read -p "Enter your account:" acct #提示用户输入用户名read -s -p "Enter your passw ...
- web自动化流程总结
一. 了解需求,什么是系统的核心业务 二. 编写测试用例:用例名称,前置条件,测试数据,测试步骤,期望结果 三. 自动化代码的初步构建:所有的元素定位.元素操作.测试用例都写在一个模块中 问题: 1. ...
- [转载]Java给word中的table赋值
一.准备工作: 下载PageOffice for Java:http://www.zhuozhengsoft.com/dowm/ 二. 实现方法: 要调用PageOffice操作Word中的tabl ...
- VMware安装VMwareTolls
要先启动Ubuntu,用root用户进入. 然后点击VMware的虚拟机——设置——安装VMwareTools 桌面会有一个安装包,解压后,执行vmware-install.pl 安装需要等别以为是安 ...
- Ajax中的XMLHttpRequest对象详解(转)
XMLHttpRequest对象是Ajax技术的核心.在Internet Explorer 5中,XMLHttpRequest对象以ActiveX对象引入,被称之为XMLHTTP,它是一种支持异步请求 ...
- java基本数据类型、修饰符、运算符
数据类型: 基本数据类型 整数类型 byte,8位 short,16位 int,32位i long,64位 浮点类型 float,单精度,32位 double,双精度,64位 布尔类型 ...