3D案例，导航，导航升级版
/*****************************百度钱包旋转变内容******************************/
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>百度钱包旋转变内容</title>
<style>
.wallet{
width: 300px;
height:300px ;
margin: 50px auto;
position: relative; transition: all 8s; transform-style:preserve-3d; /* 加了之后父盒子就真正3D*/
}
.wallet::before, .wallet::after{
content: '';
display: block;
position: absolute;
left:0;
top:0;
width:100%;
height:100%;
/*right:0;
bottom:0;*/
background: red;
}
.wallet::before{
background: #33ffca; /*可更换为图片*/
transform: translateZ(-5px);
/*子元素必须是转换元素，eg两个平面必须要有距离，才起作用transform-style:preserve-3d;*/
}
.wallet::after{
background: #3598db; /*可更换为图片*/
transform: translateZ(5px); /*可以更改两个平面Z距离*/
}
.wallet:hover{
transform: rotateY(180deg); /*顺时针180*/
}
</style>
</head>
<body>
<div class="wallet">
</div>
</body> </html>
/*****************************3D导航******************************/
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>3D导航</title>
<style>
body{
margin: 0;
padding:0;
font-family: "Agency FB";
background: #f7f7f7;
}
.nav{
height:40px;
margin-top: 50px;
text-align: center;
list-style: none;
}
li{
width:120px ;
height: 40px;
line-height: 40px;
float: left; position: relative; -webkit-transition: all 1s; transform-style:preserve-3d; /*加了之后父盒子就真正3D*/
}
li span{
position: absolute;
top:0;
left: 0;
width:100%;
height:100%;
}
li span:first-child{
background: yellow;
transform:rotateX(90deg) translateZ(20px);
}
li span:last-child{
background: #3598db;
transform: translateZ(20px);
}
li:hover{
transform: rotateX(-90deg); /*旋转整个标签*/
}
</style>
</head>
<body>
<ul class="nav">
<li>
<span>3D样式导航</span>
<span>轻轻走143</span>
</li>
<li>
<span>3D样式导航</span>
<span>轻轻走143</span>
</li>
<li>
<span>3D样式导航</span>
<span>轻轻走143</span>
</li>
<li>
<span>3D样式导航</span>
<span>轻轻走143</span>
</li>
<li>
<span>3D样式导航</span>
<span>轻轻走143</span>
</li>
</ul>
</body> </html>
/*****************************3D导航升级->3D轮播图******************************/
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>3D导航升级->3D轮播图</title>
<style>
body{
margin: 0;
padding:0;
font-family:"微软雅黑";
background: #f7f7f7;
}
.nav{
height:40px;
margin-top: 50px;
text-align: center;
list-style: none;
}
li{
width:120px ;
height: 40px;
line-height: 40px;
float: left; position: relative; -webkit-transition: all 1s; transform-style:preserve-3d; /*加了之后父盒子就真正3D*/
}
li span{
position: absolute;
top:0;
left: 0;
width:100%;
height:100%;
}
li span:first-child{
background: yellow;
transform:rotateX(90deg) translateZ(20px);
}
li span:last-child{
background: #3598db;
transform: translateZ(20px);
} /*旋转整个li标签*/
/*li:hover{
transform: rotateX(-90deg);
}*/ /*旋转整个ul标签*/
/*类似3D轮播图*/
.nav:hover li{
transform: rotateX(-90deg);
}
.nav li:nth-child(1){
transition-delay: 0s; /*延迟0s*/
}
.nav li:nth-child(1){
transition-delay: 0.2s; /*延迟0s*/
}
.nav li:nth-child(2){
transition-delay: 0.4s; /*延迟0s*/
}
.nav li:nth-child(3){
transition-delay: 0.6s; /*延迟0s*/
}
.nav li:nth-child(4){
transition-delay: 0.8s; /*延迟0s*/
}
.nav li:nth-child(5){
transition-delay: 1s; /*延迟0s*/
} </style>
</head>
<body>
<ul class="nav">
<li>
<span>3D样式导航</span>
<span>轻轻走143</span>
</li>
<li>
<span>3D样式导航</span>
<span>轻轻走143</span>
</li>
<li>
<span>3D样式导航</span>
<span>轻轻走143</span>
</li>
<li>
<span>3D样式导航</span>
<span>轻轻走143</span>
</li>
<li>
<span>3D样式导航</span>
<span>轻轻走143</span>
</li>
</ul>
</body> </html>
| 【作者】：轻轻走143 |
| 【出处】：http://www.cnblogs.com/qingqingzou-143/ |
| 【声明】：所有博文标题后加（share）的表示收集的他人优秀文章，其余的则为原创。欢迎转载，但请在显要位置显示本文链接，并保留本段声明，否则追究法律责任，谢谢！ |
3D案例，导航，导航升级版的更多相关文章
- 3D立体菜单导航
今天在微博里面看到别人分享的一个立体效果,我觉得挺好的,就拿下来自己存着,万一以后用到. 效果如下: index.html <!DOCTYPE html> <html > &l ...
- html5——3D案例（立体导航）
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- html5——3D案例（立体汉字，旋转导航）
1.立体汉字:旋转点left,attr(data-cont)可获取自定义属性值,skewY(倾斜转换)参考地址 2.旋转导航:先移动后旋转,li标签需要延迟执行旋转 注意::hover事件触发自己的: ...
- 【iOS开发-76】Private Contacts案例：导航控制器使用、数据传递、第三方类库使用、tableViewCell的加入删除、数据存储等
(1)效果 (2)源码与第三方类库下载 http://download.csdn.net/detail/wsb200514/8155979 (3)总结 --导航控制器,能够直接用代码的push和pop ...
- jQuery实际案例④——360导航图片效果
如图:①首先使用弹性盒子布局display:flex; flex-wrap:wrap; ②鼠标移上去出现“百度一下,你就知道了”,这句话之前带上各个网站的logo:③logo使用的是sprite,需要 ...
- 18. vue-router案例-tabBar导航
目标: 做一个导航tabbar 一. 分析 我们的目标是做一个导航tabbar, 要求 这个导航不仅可以在一个页面使用, 可以在多个页面通用 每个页面的样式可能不一样 每个页面的图标, 文字可能不一样 ...
- 2019.4.24 3D效果滚筒导航练习
效果图: 彩千圣天下第一!(小声bb) 代码: <!DOCTYPE html> <html> <head> <meta charset="UTF-8 ...
- html5——3D案例（立方体）
立方体:父盒子规定了3d呈现属性,立方体做旋转运动 移动顺序:1.每个盒子都先移动100px,然后再做相应的旋转 2.只有这样立方体的几何中心点与父盒子的几何中心点是一样的 <!DOCTYPE ...
- html5——3D案例（音乐盒子、百度钱包）
1.音乐盒子:触碰盒子,盖子会打开 2.百度钱包:触碰钱包,钱包,会180度旋转 <!DOCTYPE html> <html lang="en"> < ...
随机推荐
- 事件——《JS高级程序设计》
一. 事件流 1. 事件流描述的是从页面中接收事件的顺序 2. 事件冒泡(event bubble):事件从开始时由最具体的元素(就是嵌套最深的那个节点)开始,逐级向上传播到较为不具体的节点(就是Do ...
- ZOJ 3170 Friends
点我看题目 题意 : 就是有n个人,m对关系,每对关系的两个人是好朋友,这个关系是相互的,如果有两个人的共同好朋友超过k个,那这两个人也会是好朋友的,给你m对关系,给你足够长的时间,问你还能增加几对关 ...
- SQLite入门与分析(九)---VACUUM命令分析
VACUUM命令是SQLite的一个扩展功能,模仿PostgreSQL中的相同命令而来.若调用VACUUM带一个表名或索引名, 则将整理该表或索引.在SQLite 1.0中,VACUUM命令调用 gd ...
- SQL Server中时间段查询和数据类型转换
不知道什么时候对数据独有情种,也许是因为所学专业的缘故,也许是在多年的工作中的亲身经历,无数据,很多事情干不了,数据精度不够,也很多事情干不了,有一次跟一个朋友开玩笑说,如果在写论文的时候,能有一份独 ...
- 在电脑上装ubuntu12.04系统，内核文件是那个？
在电脑上装ubuntu12.04系统,我们能看到的是根文件系统,那么内核文件(zlmage)是那个? ???
- wps 2012-2013 通杀漏洞（CVE-2013-3934）
测试方法: 本站提供程序(方法)可能带有攻击性,仅供安全研究与教学之用,风险自负! #!/usr/bin/python # Exploit Title: Kingsoft Office Writer ...
- [OpenJudge] 平方和
平方和 总时间限制: 3000ms 内存限制: 65536kB 描述 给出n(1<=n<=500000)个数字,下标从1开始 执行m(1<=m<=500000)次操作,操作可分 ...
- Azure 媒体服务支持 DASH 实时传送流
Kilroy Hughes Azure媒体服务数字媒体架构师 本文重点介绍 Azure 媒体服务支持的 DASH 实时传送流功能,同时阐述如何利用这些功能将实时和点播自适应流传送至 Web 浏览器 ...
- 可视化zookeeper的事务日志（转）
前面提到,在zookeeper server的配置文件zoo.cfg中可以通过dataLogDir来配置zookeeper的事务日志的输出目录,这个事务日志类似于下面这样的文件: 这个文件是一个二进制 ...
- asp.net的运行内幕
每当浏览器向IIS发送一个页面请求的时候,相应的网页就会被编译成DLL文件,然后由JIT来运行这个DLL文件,最后将运行结果发送给客户端.一旦网页发送了变化,下次再请求页面的话,网页又会被重新被编译成 ...