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渲染,所以外观更加漂亮.另 ...
随机推荐
- 转帖：DotNet 资源大全中文版
(注:下面用 [$] 标注的表示收费工具,但部分收费工具针对开源软件的开发/部署/托管是免费的) API 框架 NancyFx:轻量.用于构建 HTTP 基础服务的非正式(low-ceremony)框 ...
- HTML5系列：HTML5与HTML4的区别
1. 语法的改变 1.1 DOCTYPE声明 DOCTYPE声明在HTML文件中必不可少,位于文件第一行. HTML4中声明方法: <!DOCTYPE html PUBLIC "-// ...
- 数据访问模式：Identity Map（标识映射）模式
1.Identity Map模式简介 Identity Map(标识映射)模式是通过将所有已加载对象放在一个映射中确保所有对象只被加载一次,并且在引用这些对象时使用该映射来查找对象.在处理数据并发访问 ...
- python利用dict模拟switch
pytho本身并未提供switch语句,但可以通过dict来模拟switch, #方法1 def add(x,y): return x+y def dec(x,y): return x-y def m ...
- 10年C#历程的MVP之路与MVP项目介绍
本博客所有文章分类的总目录:http://www.cnblogs.com/asxinyu/p/4288836.html 1.意外的惊喜 10月份收到微软总部寄来的荣誉证书,非常激动, ...
- ASP.NET Core的配置（4）：多样性的配置来源[中篇]
我们在本篇文章中会介绍三种针对物理文件的ConfiguationProvider,它们分别是针对JSON文件的JsonConfiguationProvider,针对XML文件的XmlConfiguat ...
- iOS开发之各种动画各种页面切面效果
因工作原因,有段时间没发表博客了,今天就发表篇博客给大家带来一些干货,切勿错过哦.今天所介绍的主题是关于动画的,在之前的博客中也有用到动画的地方,今天就好好的总结一下iOS开发中常用的动画.说道动画其 ...
- 浅谈 php 采用curl 函数库获取网页 cookie 和 带着cookie去访问 网页的方法！！！！
由于近段时间帮朋友开发一个能够查询正方教务系统的微信公众平台号.有所收获.这里总结下个人经验. 开讲前,先吐槽一下新浪云服务器,一个程序里的 同一个函数 在PC测试可以正常运行,在它那里就会挂的 ...
- 重温Servlet学习笔记--编码问题
在说编码问题之前,首先先了解一下常见的字符编码: ISO-8859-1: 拉丁编码,不支持中文 gbk,gb2312,gb18030:系统默认编码,是中国的国标码 utf-8: 支持几乎所有语言的编 ...
- java.util.ConcurrentModificationException异常处理
ConcurrentModificationException异常处理 ConcurrentModificationException异常是Iterator遍历ArrayList或者HashMap数组 ...