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"> < ...
随机推荐
- AForm — 模型驱动的自动化表单解决方案
http://xiehuiqi220.github.io/AForm/doc/book/#
- csuoj 1352: New Sorting Algorithm
因为每个元素都是移动到比它小1位的元素的后面: 这样的话以后的一定就可以把他们两个打包: 所以用这种方法最多扫一遍就可以了: 但是最小的那个数要不要移动呢? 如果最小的数后面的数都是升序的,那么一直扫 ...
- HDU - 3594 Cactus
这是一个有向仙人掌的题目,要求判定给定的图是不是强连通图,而且每一条边只能出现在一个环中,这里有一个介绍有向仙人掌的文档:http://files.cnblogs.com/ambition/cactu ...
- SQL模糊查询与删除多条语句复习
string IDlist="1,2,3"; 批量删除数据 StringBuilder strsql=new StringBuilder(); strSql.Append(&quo ...
- crtmpserver系列之一：流媒体概述
阅读目录 概述 流媒体系统的组成 媒体文件封装 传输协议 回到顶部 概述 所谓流媒体按照字面意思理解就是像流一样的媒体,看起来像是废话.流媒体现在司空见惯,所以一般人大概不会有疑问.事实上在流媒体还没 ...
- ☀【JS】Code
1 <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="utf- ...
- c程序设计语言_习题1-11_学习单元测试，自己生成测试输入文件
How would you test the word count program? What kinds of input are most likely to uncover bugs if th ...
- 【转】java中静态代码块的用法 static用法详解
原文网址:http://www.cnblogs.com/panjun-Donet/archive/2010/08/10/1796209.html (一)java 静态代码块 静态方法区别一般情况下,如 ...
- jQuery on()方法绑定动态元素的点击事件
之前就一直受这个问题的困扰,在jQuery1.7版本之后添加了on方法,之前就了解过,其优越性高于live(),bind(),delegate()等方法,在此之前项目中想用这个来测试结果发现,居然动态 ...
- 使用 jQuery 进行前端验证 -- 1
如今很多的网站偶会有不同层次的验证去验证用户输入的信息是否符合我们所需要的数据类型.并且可以说任何有输入的地方都需要的去验证,验证一方面是要求用户输入正确格式的数据,同时也是避免恶意的用户进行非法的输 ...