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渲染,所以外观更加漂亮.另 ...
随机推荐
- [转]PHP的执行流程,PHP扩展加载过程
原文:http://www.imsiren.com/archives/535 为了以后能开发PHP扩展..就一定要了解PHP的执行顺序..这篇文章就是为C开发PHP扩展做铺垫. web环境 我们假设为 ...
- SQL Server-数据库架构和对象、定义数据完整性（二）
前言 本节我们继续SQL之旅,本节我们如题来讲讲一些基本知识以及需要注意的地方,若有不妥之处,还望指出,简短的内容,深入的理解,Always to review the basics. 数据库架构和对 ...
- 通过setTimeout来取消因大量计算造成的网页卡顿
js是单线程的,所以有些大量计算的操作会占用线程资源,导致页面卡住. 今天遇到这样一个场景,选择一个下拉框之后,对数据进行筛选,这个过程中有大量计算,点了selecte的option之后,option ...
- Deferred在jQuery和Angular中的使用与简单实现
Deferred在jQuery和Angular中的使用与简单实现 Deferred是在jQuery1.5版本中加入的,并且jQuery使用它完全重写了AJax,以前也只是偶尔使用.但是上次在使用Ang ...
- 利用免费的Spire.XLS控件制作Excel报表
我们小组上个季度接手了一个项目其中需要实现创建excel文档的功能,寻找实现这个功能的控件的任务分配给了我,通过百度搜索我找到了一个免费的控件,它是由E-iceblue公司推出的spire.xls控件 ...
- 编译器出现conflicting types for 某某的错误原因总结
直译就是xxxx 发生了一种冲突!比如今天发现的这个错误,实属低级! 本次错误的原因是:函数没有先声明,便写在了主函数后面!应该是先声明,后定义,如果只有定义,则定义必须写在主函数上方.通过查资料,有 ...
- Azure Application Gateway (3) 设置URL路由
<Windows Azure Platform 系列文章目录> 在之前的文章中,笔者介绍了Azure Web App可以设置URL路由.如下图: 在这里笔者简单介绍一下,首先我们还是创建以 ...
- 相克军_Oracle体系_随堂笔记012-undo
undo表空间中undo段是自动生成的,oracle自动使用undo表空间的undo段. 作为高级DBA,需要了解Oracle是如何使用undo段的.这样出了性能问题才能够解决. 1.Undo表空 ...
- 解析ActionResult子类JsonResult
前言 MVC我是11开始使用的,当时还是在上地软件园一小型互联网公司,当时是MVC2.0+Linq to sql.后来接着学习MVC3,MVC3的出现确实让我有种眼前一亮的感觉,期间我不断的写各种de ...
- 魔方渗透系统安装VMtools教程
虚拟机魔方渗透系统安装VMtools教程 1.开机登陆后,如图点击安装VMtools. 2.进入media文件夹: cd /media 查看mdia文件夹内容: ls 3.打开VMware T ...