html 图片的过渡效果,利用css3+js实现简单带立体过渡效果的图片切换（chrome浏览器）...

图片立体过渡切换效果

*{margin:0;padding:0;}div{width:500px;height:500px;margin:150px auto;position:relative;perspective:800px;}ul{list-style:none;width:500px;height:280px;}li{position:absolute;top:0;left:0;transition:all 1s;}li.center{transform:translateZ(100px);z-index:10;}li.left1{transform:rotateY(25deg) translateX(-150px);z-index:9;}li.left2{transform:rotateY(18deg) translateX(-300px);z-index:8;}li.right1{transform:rotateY(-25deg) translateX(150px);z-index:9;}li.right2{transform:rotateY(-18deg) translateX(300px);z-index:8;}li.back{transform:translateZ(-200px);z-index:1;}span{width:60px;height:60px;background:rgba(255,255,255,.3);color:#fff;font-weight:bold;position:absolute;left:-380px;top:80px;z-index:11;font-size:50px;text-align:center;line-height:60px;cursor:pointer;}span:nth-of-type(2){left:810px;}

window.οnlοad=function(){varul=document.getElementsByTagName("ul")[0];vardiv=document.getElementsByTagName("div")[0];varlis=document.getElementsByTagName("li");varspans=document.getElementsByTagName("span");varclasses=["left2","left1","center","right1","right2","back","back","back","back"];varlock=false //定义动画锁,false为没锁定

spans[0].οnclick=function(){if(lock==false){//如果动画没有被锁

lock=true;

setTimeout(function(){

lock=false;//1秒后解锁

},500);varfirst_class=classes.shift();//取出数组第一个元素

classes.push(first_class);//将取出的第一个元素加到放到数组最后

for(vari=0;i

lis[i].className=classes[i];//将lis的类与classes对应起来

}

}

}

spans[1].οnclick=function(){if(lock==false){//如果动画没有被锁

lock=true;

setTimeout(function(){

lock=false;//1秒后解锁

},500);varlast_class=classes.pop();

classes.unshift(last_class);for(varj=0;j

lis[j].className=classes[j];

}

}

}

}

<

>