3D banner(CSS3+HTML5)
1.这是一篇 3Dbanner制作的简易流程，支持高版本的chrome和firefox浏览器，俩浏览器显示可能会有些差异
2.没有兼容性代码，因为仅仅只是熟悉流程，希望小伙伴们自己改善哈(>﹏<。)
3.代码中有注释，代码直接复制，粘贴成.html的文件，用浏览器打开即可
4.貌似不支持3D环境，所以没有效果，只能附图
代码如下：
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus®">
<meta name="Author" content="1的N次幂">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>3D banner</title>
<style type="text/css">
*{
margin:0;
padding:0;
}
body{
font-size:14px;
overflow:hidden;
}
a{
text-decoration:none;
font-size:14px;
color:#fff;
}
ul li,ol{
list-style-type:none;
}
.bg_img{
width:100%;
height:100%;
}
.bg_img img{
width:100%;
height:100%;
position:fixed;
top:0;
left:0;
}
.container{
margin-top:150px;
width:100%;
height:100%;
}
.container .banner{
margin:auto;
width:640px;
height:200px;
perspective:800px;/*设置透明深度（类似于看电影选位置，选个好位置才能看得更清楚）*/
}
.container .banner ul{
width:640px;
height:200px;
}
.container .banner ul li{
width:160px;
height:200px;
position:relative;
transform-style:preserve-3d;/*设置3d环境，必须设置之后才有3d效果*/
float:left;
transition:all 2s ease;
}
.container .banner ul li div{
width:160px;
height:200px;
position:absolute;
text-align:center;
line-height:300px;
}
/*Start 设置背景图片、旋转角度和旋转轴*/
/*
li div:nth-child(n)：表示li下面可能有很多个div，但是我只选中了第n个div，n表示索引（该索引从1开始）
transform:translateZ(150px);表示沿着Z轴正方向移动150px
transform: rotateX(90deg);表示远着X轴旋转正的90度
*/
.container .banner ul li div:nth-child(1){
top:-200px;
transform:translateZ(100px) rotateX(90deg);
transform-origin:bottom;
background:url("http://images.cnblogs.com/cnblogs_com/zhangbin-java/874438/t_1.jpg") no-repeat center center;
background-size:640px 200px;
}
.container .banner ul li div:nth-child(2){
top:200px;
transform:translateZ(100px) rotateX(-90deg);
transform-origin:top;
background:url("http://images.cnblogs.com/cnblogs_com/zhangbin-java/874438/t_2.jpg") no-repeat center center;
background-size:640px 200px;
}
.container .banner ul li div:nth-child(3){
transform:translateZ(100px);
background:url("http://images.cnblogs.com/cnblogs_com/zhangbin-java/874438/t_3.jpg") no-repeat center center;
background-size:640px 200px;
}
.container .banner ul li div:nth-child(4){
transform:translateZ(-100px) rotateX(180deg);
background:url("http://images.cnblogs.com/cnblogs_com/zhangbin-java/874438/t_4.jpg") no-repeat center center;
background-size:640px 200px;
}
/*Start 设置背景图片、旋转角度和旋转轴*/
/*左右两边的看不到，所以这部分代码不需要（仅仅做测试使用）*/
/* .container .banner ul li div:nth-child(5){
right:200px;
width:300px;
transform:translateZ(150px) rotateY(-90deg);
transform-origin:right;
}
.container .banner ul li div:nth-child(6){
left:200px;
width:300px;
transform:translateZ(150px) rotateY(90deg);
transform-origin:left;
}
*/
/* Start 背景定位*/
/*
ul li:nth-child(n) div:表示ul下面可能有很多个li，但是我只选中第n个li下面的所有div
*/
.container .banner ul li:nth-child(1) div{
background-position:0;
}
.container .banner ul li:nth-child(2) div{
background-position:-160px;
}
.container .banner ul li:nth-child(3) div{
background-position:-320px;
}
.container .banner ul li:nth-child(4) div{
background-position:-480px;
}
/* End 背景定位*/
/*Start 添加hover事件，让banner动起来*/
/*
transition;表示一个时间过度或者是持续时间，它是一个过程。
transition:all 2s linear;表示全部的效果都用两秒钟去完成（过度），效果是linear，还有其他效果，可以参考手册，其他的我也没用过(>﹏<。)～呜呜呜……
*/
.banner:hover ul li{
transform:rotateX(270deg);
transition:all 2s linear;
}
/*End 添加hover事件，让banner动起来*/
</style>
</head>
<body>
<!--设置一个背景图-->
<div class="bg_img">
<img src="http://images.cnblogs.com/cnblogs_com/zhangbin-java/874438/t_bgs.jpg"/>
</div>
<!--start banner-->
<div class="container">
<div class="banner">
<ul>
<li>
<div></div>
<div></div>
<div></div>
<div></div>
</li>
<li>
<div></div>
<div></div>
<div></div>
<div></div>
</li>
<li>
<div></div>
<div></div>
<div></div>
<div></div>
</li>
<li style="z-index:-1;">
<div></div>
<div></div>
<div></div>
<div></div>
</li>
</ul>
</div>
</div>
<!--End banner-->
</body>
</html>
效果大概是这样的：附图
解释：事实上，我们把banner用4个li分成了4分，每份用4个div又分成了4分，li是将banner分成4个块，li里面的div用来背景定位的，为什么要这么做呢，是因为我们将做一个更炫酷的banner，我会在下一片博客中写到。分成四分效果图如下，
3D banner(CSS3+HTML5)的更多相关文章
- 超酷 CSS3/HTML5 3D 飘带菜单实现教程
今天我们来介绍一款很有创意的CSS3/HTML5菜单,首先菜单是飘带形状的,看起来很优雅,这种菜单在个人博客中用的比较多,不仅干净利落,而且很具有个性化.另外,这款菜单在鼠标滑过菜单项时,将会出现3D ...
- 8个3D视觉效果的HTML5动画欣赏
现在的网页中应用了越来越多的3D应用,特别是基于HTML5 Canvas的动画特效,让用户有一种非常震撼的视觉体验.本文收集了8个非常炫酷的3D视觉效果的HTML5动画,都有源代码分享,你可以学习你感 ...
- 3D Banner(jQuery)
1.这是用面向对象的思想去动态生成banner的简易流程,用到一个javaScript框架jQuer: 2.将代码黏贴成html文件,直接用浏览器打开即可: 3.layer属于弹窗提示类插件,可能需要 ...
- CSS3+HTML5特效8 - 顶部和右侧固定，左侧随窗口变化的布局
原文:CSS3+HTML5特效8 - 顶部和右侧固定,左侧随窗口变化的布局 效果演示 实现原理 使用3个div(一个是顶部栏,一个是左侧栏,一个是右侧栏): 使用checkbox作为判断是否显示和隐藏 ...
- CSS3+HTML5特效9 - 简单的时钟
原文:CSS3+HTML5特效9 - 简单的时钟 效果演示(加快了100倍) 实现原理 利用CSS3的transform-origin 及 transform 完成以上效果. 代码及说 ...
- js+css3+HTML5拖动滑块(type="range")改变值
最近在做一个H5的改版项目,产品和设计给出的效果中有一个拖动滑块可以改变输入值的效果,类似如下图这样: 拿到这样的设计稿后,我有点懵了,自己写一个js?去网上找一个这样的效果?自己写一个可以,只是实现 ...
- 学习笔记 第十二章 CSS3+HTML5网页排版
第12章 CSS3+HTML5网页排版 [学习重点] 正确使用HTML5结构标签 正确使用HTML5语义元素 能够设计符合标准的网页结构 12.1 使用结构标签 在制作网页时,不仅需要使用< ...
- 七夕节表白3d相册制作(html5+css3)
七夕节表白3d相册制作 涉及知识点 定位 阴影 3d转换 动画 主要思路: 通过定位将所有照片叠在一起,在设置默认的样式以及照片的布局,最后通过设置盒子以及照片的旋转动画来达到效果. 代码如下: &l ...
- 8款强大的CSS3/HTML5动画及应用源码
1.CSS3 jQuery UI控制滑杆插件 今天我们要来分享一款基于CSS3和jQuery UI的控制滑杆插件,这款控制滑杆是在HTML5滑杆元素的基础上进行自定义CSS3渲染,所以外观更加漂亮.另 ...
随机推荐
- Sql Server系列：子查询
1 子查询概念 子查询是嵌套在另一个查询中的普通T-SQL查询.在有一个SELECT语句通过使用小括号创建子查询,作为另一个查询的部分数据或条件的基础. 子查询通常用于满足以下某个需求: ◊ 将一个查 ...
- Sql Server系列：游标
1. 游标简介 游标是一种处理数据的方法,主要用于存储过程.触发器和Transact-SQL脚本中.SELECT语句返回的是一个结果集,游标能够从包含多条数据记录的结果集中每次提取一条记录. 游标的特 ...
- C#设计模式系列：模板方法模式（Template Method）
你去银行取款的时候,银行会给你一张取款单,这张取款单就是一个模板,它把公共的内容提取到模板中,只留下部分让用户来填写.在软件系统中,将多个类的共有内容提取到一个模板中的思想便是模板方法模式的思想. 模 ...
- android标题栏下面弹出提示框(一) TextView实现,带动画效果
产品经理用的是ios手机,于是android就走上了模仿的道路.做这个东西也走了一些弯路,写一篇博客放在这里,以后自己也可用参考,也方便别人学习. 弯路: 1.刚开始本来用PopupWindow去实现 ...
- Comet ASP.NET AJAX 示例
最近公司有个项目,里面要求要用到Comet技术,所以就到网上找了一下相关的资料和文章,发现有些人说用Ajax的长轮询比较好,后来就百度了一下,发现comet貌似就是通过ajax演变而来的,也就是com ...
- react-native 学习之TextInput组件篇
/** * Sample React Native App * https://github.com/facebook/react-native */ 'use strict'; import Rea ...
- java 开发中经常问到得懒汉模式 （单利模式）
//懒汉模式 class Single { public static Single s = null; public Single (){} public static Single getInst ...
- 設置Linux保留物理內存並使用 （1）
在Linux系統中可以通過memblock來設置系統保留物理內存,防止這些內存被內存管理系統分配出去. 作者: 彭東林 郵箱: pengdonglin137@163.com 平臺 硬件平臺: TQ24 ...
- HTML中使用javascript解除禁止input输入框代码：
转:表单中Readonly和Disabled的区别 参考资料: disabled和readonly区别: 参考博文1地址:http://blog.csdn.net/symgdwyh/article/d ...
- iOS 视图与视图层次结构（内容根据iOS编程）
视图基础 视图是 UIView 对象,或者其子对象. 视图知道如何绘制自己. 视图可以处理事件,例如触摸(touch). 视图会按照层次结构排列,位于视图层次结构顶端的是应用窗口. 视图层次结构 任何 ...