3D颗粒效果翻转

3D颗粒效果是利用transition、transform，transform-style:perpective-3d;来完成此次的效果；
首先我们要用css3把基本样式做好；
再来进行js的效果处理；
颗粒效果4步法：
1.铺span
2.单击出基本的效果
3.瞬间拉回 换图
4.点击快了
咱们先看一下效果照片：

3D颗粒效果.png

光说还是不够的，代码呈上：
css3：

<style>

*{
margin: 0;
padding: 0;
}
#box{
width:700px;
height:400px;
background: #2b2b2b;
border:4px solid #FFB442;
position:relative;
}
#box span{
position: absolute;
transform-style:preserve-3d;
transform:perspective(800px) rotateY(0deg);
}
#box span .front{
width:100%;
height:100%;
position: absolute;
background: url("img/0.jpg") no-repeat;
backface-visibility:hidden;
z-index: 2;
}
#box span .back{
width:100%;
height:100%;
position: absolute;
background: url("img/1.jpg") no-repeat;
transform:scale(-1,1) ;
z-index: 1;
}
/*#box:active span{*/
/*transform:perspective(800px) rotateY(180deg);*/
/*}*/
</style>

js代码:

<script>
document.addEventListener('DOMContentLoaded',function(){
//获取id
var oBox=document.getElementById('box');
//定义列数
var C=7;
/定义行数
var R=4;
//两个循环，创建span，是能够铺满真个box；这是实现此次效果最重要的
for(var r=0;r<R;r++){
for(var c=0;c<C;c++){
//创建span
var oSpan=document.createElement('span');
//获取平均每一个span的宽
var w=oBox.offsetWidth/C;
/获取平均一个span的高
var h=oBox.offsetHeight/R;
//获取span的宽
oSpan.style.width=w+'px';
//获取span的高
oSpan.style.height=h+'px';
//获取span到box的距离
oSpan.style.left=w*c+'px';
//获取span到box的距离
oSpan.style.top=h*r+'px';
//在span里创建两个em；一个正面，一个反面，
oSpan.innerHTML='<em class="front"></em><em class="back"></em>';
//创建好的添加到oBox里
oBox.appendChild(oSpan);
//为了使效果更好的，达到斜着翻转，所要 定义的oSpan.c和oSpan.r
oSpan.c = c;
oSpan.r = r;
//每一块的span的定位都不同，那么照片的可都是一样的，所有我们要重新定义一把照片的位置，使能展示出一张完成无瑕疵的照片
oSpan.children[0].style.backgroundPosition = -oSpan.offsetLeft+'px -'+oSpan.offsetTop+'px';
//同上一样，正面的需要，反面也得需要
oSpan.children[1].style.backgroundPosition = -oSpan.offsetLeft+'px -'+oSpan.offsetTop+'px';
}
}
var aSpan = oBox.children;
//定义一个图片的初始值
var iNow=0;
 //定义开关
var bReady=true;
 //点击图片时每个span翻转
oBox.onclick = function(){
//防止点击过快时图片会跳
if(bReady==false){return;}
bReady=false;
 //每点击一次加1
iNow++;
for(var i=0;i<aSpan.length;i++){
// aSpan[i].style.transition = '1s all ease '+200*(aSpan[i].r+aSpan[i].c)+'ms';
//定义是为了让对应的span能有序的展开
aSpan[i].style.transition = '1s all ease '+200*(aSpan[i].r+aSpan[i].c)+'ms';
aSpan[i].style.transform = 'perspective(800px) rotateY(180deg)';
}
};
aSpan[aSpan.length-1].addEventListener('transitionend',function(){
//瞬间拉回
for(var i=0;i<aSpan.length;i++){
aSpan[i].style.transition='none';
aSpan[i].style.transform='perspective(800px) rotateY(0deg)';
//换照片
aSpan[i].children[0].style.backgroundImage='url("img/'+iNow%3+'.jpg")';
aSpan[i].children[1].style.backgroundImage='url("img/'+((iNow+1)%3)+'.jpg")';
 //过渡完成后允许点击
bReady=true;
}
},false);
},false);
</script>