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"> < ...
随机推荐
- 关于Jquery中ajax方法data参数用法的总结
data 发送到服务器的数据.将自动转换为请求字符串格式.GET 请求中将附加在 URL 后.查看 processData 选项说明以禁止此自动转换.必须为 Key/Value 格式.如果为数组,jQ ...
- POJ2302
简单题. #include<stdio.h> #include<string.h> #include<stdlib.h> #include<algorithm ...
- java Date和String转换总结
java.util.Date和String类型的转换是非常常用的,现在总结一下: 1. Date转换为String //Date --->String DateFormat dft = new ...
- mysql通过frm+ibd文件还原data
此方法只适合innodb_file_per_table = 1 当误删除ibdata 该怎么办? 如下步骤即可恢复: 1.准备工作 1)准备一台纯洁的mysql环境[从启动到现在没有 ...
- java 对象 类 知识点 概览
第30集 面向对象,核心是对象,以对象来思考
- 两个表，一个表中的两列关联另一个表的id，如何将这个表中的两列显示为另一个表id对应的内容
表A name user owner machine1 1 2 machine2 3 4 表B userid username 1 aaa 2 bbb 3 ccc 4 ddd 以上两个表,表A 设备的 ...
- DHTMLX 前端框架 建立你的一个应用程序 教程(五)--添加一个表格Grid
表格例子 样本如下: 我们这篇介绍的是dhtmlxGrid 组件. 它支持4种数据格式:XML, JSON, CSV, JSArray. 添加表格到布局的单元格中去: 1.使用attachGrid( ...
- SQLite入门与分析(八)---存储模型(2)
3.页面结构(page structure) 数据库文件分成固定大小的页面.SQLite通过B+tree模型来管理所有的页面.页面(page)分三种类型:要么是tree page,或者是overflo ...
- SPRING IN ACTION 第4版笔记-第五章Building Spring web applications-001-SpringMVC介绍
一. 二.用Java文件配置web application 1. package spittr.config; import org.springframework.web.servlet.suppo ...
- Ember.js demo2
<!DOCTYPE html> <html> <head> <script src="http://code.jquery.com/jquery-1 ...