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"> < ...
随机推荐
- 《暗黑世界》安卓APK 编译流程详细说明教程！（图文）
原地址:http://bbs.gameres.com/forum.php?mod=viewthread&tid=223671 关于开发环境的搭建,之前的相关文档已经很详细的说明,对环境的搭建请 ...
- Python中文全攻略
原文链接:http://blog.csdn.net/mayflowers/archive/2007/04/18/1568852.aspx 1. 在Python中使用中文 在Python中 ...
- jsp接收相同复合参数 request.getParameterValues()用法
在网站中往往需要用户选择复选框,此时需要创建多个复选框让用户进行选择: <head> <meta http-equiv="Content-Type" conten ...
- Jmeter java协议配置文件导入
一. 方法一 通过ClassLoader获取当前路径,想在java脚本里读取druid.properties,路径如下 apache-jmeter --bin --druid.properties 相 ...
- ZOJ - 3195 Design the city
题目要对每次询问将一个树形图的三个点连接,输出最短距离. 利用tarjan离线算法,算出每次询问的任意两个点的最短公共祖先,并在dfs过程中求出离根的距离.把每次询问的三个点两两求出最短距离,这样最终 ...
- Linux中断处理流程
http://blog.csdn.net/dianhuiren/article/details/7468956
- 【HDOJ】2054 A == B ？
这道题目起初看,so easy.再看一下ac率,注意到没有说明变量类型.显然是一道字符串的题.需要考虑+/-符号位,+.1.-.1.00010.0.+0.-00.00等情况,同时数组开到100000以 ...
- 应付系统选项 Payables Options
(N) AP > Setup > Options > Payables Options应付系统选项设置整个应付系统使用的控制项和默认值.我们可以在此窗口中设置默认值,从而简化供应商输 ...
- CodeForces 400
A - Inna and Choose Options Time Limit:1000MS Memory Limit:262144KB 64bit IO Format:%I64d &a ...
- 用PowerShell批量部署wsp包
转:http://www.xuebuyuan.com/168337.html 提供wsp部署的参数: $wsppath:wsp文件所在的路径,如"c:\" $wspnames:路径 ...