CSS3的3d变换
CSS3给我们提供了一个新的功能，那就是3d变换。3d变换和2d变换的基本API函数类似，只不过多了些在Z轴上的操作，不难使用。
但是，为了让元素拥有3d变换的功能，我们需要给他的父元素设置相应的变换属性。与其相关的属性为perspective和transform-style。在新版的Chrome中已不需要添加私有前缀，不过为了兼容之前版本的浏览器，建议还是加上私有前缀（本例中并未添加私有前缀）。
perspective属性取值为：none|number。当值为数字时，意味着该元素与我们眼睛之间的距离为该值。该属性定义在需要3d变换的元素的父元素上，声明该属性意味着定义了一个3d空间，值越小，3d效果越明显。其实可以有种方法更易理解，3d变换坐标系的Z轴我们可以类比为z-index定义的层叠上下文，而perspective取值就为眼睛与该层之间的距离。
可以借用一张图来阐述：
d值为设置的perspective属性，z值为元素所在Z轴距离屏幕的长度，上图为z值为正值，下图的z值为负值。
对于transform-style属性的取值有两种，分别为flat和preserve-3d。flat意味不存在3d空间，在Z平面上的变换会平展到x-y面上来，没有3d效果。preserve-3d则将该元素的所有子元素放入3d空间中，执行3d变换。
综上来看，transform-style可以为子元素创建3d空间，perspective可以设置视距（透视视深），而且该值只对第一个子元素有效。这两个属性可以结合使用，transform-style可以延续设置的视深，供其子元素使用。
实现3d轮播
轮播的实现并不难，在这里只是将2d转换为3d效果。为了实现要求，我们需要对图片呈现区域进行分片，每个分片执行不同的3d操作，造成很炫的视觉效果。
body{margin:;padding:;overflow: hidden;}
.wrap{width: 560px;margin:30px auto;border: 10px solid #000000;}
.win{position: relative;perspective:none;}
.segment{transform-style: preserve-3d;}
.segment p{margin:;padding:;position:absolute;width:140px;height:100px;background: url(img/0.jpg)}
.container{height: 300px;}
.shadow{height:100%;width:100%;position: absolute;left:;top:;box-shadow: inset 0 0 40px;}
.tools{margin:;padding:;list-style: none;position: absolute;right:30px;bottom: 20px;}
.tools li{float: left;margin-right:20px;}
.btn>a:nth-child(1){display:block;width:45px;height:45px;background: url(./img/icons.png) 0 0 no-repeat;position: absolute;left:10px;top:135px;}
.btn>a:nth-child(2){display:block;width:45px;height:45px;background: url(./img/icons.png) 0 -45px no-repeat;position: absolute;right:10px;top:135px;}
.win .fly p{opacity:;}
.win .fly p:nth-child(1){transform: rotateX(30deg) rotateY(10deg) translateZ(500px);}
.win .fly p:nth-child(2){transform: rotateX(330deg) rotateY(10deg) translateZ(500px);}
.win .fly p:nth-child(3){transform: rotateX(3450deg) rotateY(10deg) translateZ(500px);}
.win .fly p:nth-child(4){transform: rotateX(-30deg) rotateY(-10deg) translateZ(500px);}
.win .fly p:nth-child(5){transform: rotateX(330deg) rotateY(10deg) translateZ(500px);}
.win .fly p:nth-child(6){transform: rotateX(40deg) rotateY(20deg) translateZ(500px);}
.win .fly p:nth-child(7){transform: rotateX(340deg) rotateY(10deg) translateZ(500px);}
.win .fly p:nth-child(8){transform: rotateX(3450deg) rotateY(60deg) translateZ(500px);}
.win .fly p:nth-child(9){transform: rotateX(230deg) rotateY(10deg) translateZ(500px);}
.win .fly p:nth-child(10){transform: rotateX(20deg) rotateY(20deg) translateZ(500px);}
.win .fly p:nth-child(11){transform:rotateX(30deg) rotateY(10deg) translateZ(500px);}
.win .fly p:nth-child(12){transform: rotateX(10deg) rotateY(15deg) translateZ(500px);}
.tools .current{background: url(./img/icons.png) -8px -125px no-repeat;}
.tools li{background: url(./img/icons.png) -23px -125px;width: 15px;height: 15px;}
<div class="wrap">
<div class="win">
<div class="segment">
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
</div>
<div class="container">
<img id="pic" src="./img/0.jpg">
</div>
<div class="shadow"></div>
<div class="btn">
<a id="left" href="javascript:void 0"></a>
<a id="right" href="javascript:void 0"></a>
</div>
<ul class="tools">
<li class="current"></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
</div>
$(function(){
var ps = $("p",".segment"), p, c,m;
var pic = $("#pic"),left = $("#left"),
right = $("#right");
var counter = 0;
var lis = $(".tools li");
// 将图片区域分成12个片段
function slice(){
for(var i=0;i<12;i++){
c = Math.floor(i / 4);
m = i % 4;
p = $(ps[i]);
p.css({
left: m*140+"px",
top: c*100+"px"
});
p.css("background-position",-m*140+"px "+ (-c*100)+"px");
}
}
slice();
// 设置渐进和背景图片
function coo(){
$(".segment").addClass("fly");
$(".segment p").css("transition","all 1s ease 0s");
pic.attr("src","./img/"+counter+".jpg");
setTimeout(function(){
$(".segment p").css({
"transition":"none",
"background-image": "url(img/"+counter+".jpg)"
});
$(".segment").removeClass("fly");
},1000)
}
left.click(function(e){
if(counter == 0){
counter = 4;
}else{
counter--;
}
coo();
$.each(lis,function(li){
$(lis[li]).removeClass("current");
});
$(lis[counter]).addClass("current");
});
right.click(function(){
if(counter == 4){
counter = 0;
}else{
counter++;
}
coo();
$.each(lis,function(li){
$(lis[li]).removeClass("current");
});
$(lis[counter]).addClass("current");
})
})