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，我会在下一片博客中写到。分成四分效果图如下，
