js實(shí)現(xiàn)3D圖片展示效果

第js實(shí)現(xiàn)3D圖片展示效果效果圖：

代碼如下：

!doctypehtml

html

head

metacharset="UTF-8"

titleTitle/title

style

*{margin:0;padding:0;list-style:none;}

width:300px;

height:300px;

margin:100pxauto;

position:relative;

-webkit-transform-style:preserve-3d;

perspective:800px;

ulli{

position:absolute;

top:0;left:0;

width:100%;

height:100%;

text-align:center;

line-height:300px;

font-size:50px;

background:#399;

border:1pxsolid#000;

opacity:0;

opacity:0;

-webkit-transform:translate(-280px,0)rotateY(45deg);

z-index:3;

opacity:1;

-webkit-transform:translate(-220px,0)rotateY(45deg);

z-index:4;

.cur{

opacity:1;

-webkit-transform:translateZ(50px);

z-index:5;

opacity:1;

-webkit-transform:translate(220px,0)rotateY(-45deg);

z-index:4;

opacity:0;

-webkit-transform:translate(280px,0)rotateY(-45deg);

z-index:3;

/style

script

window.onload=function(){

varoPrev=document.querySelector('.prev_btn');

varoNext=document.querySelector('.next_btn');

varaLi=document.querySelectorAll('ulli');

varaClass=[];

for(vari=0;iaLi.length;i++){

aClass[i]=aLi[i].className;

varbOk=false;

oPrev.onclick=function(){

if(bOk)return;

bOk=true;

aClass.push(aClass.shift());

change();

oNext.onclick=function(){

if(bOk)return;

bOk=true;

aClass.unshift(aClass.pop());

change();

functionchange(){

for(vari=0;iaLi.length;i++){

aLi[i].style.WebkitTransition='.5sallease';

aLi[i].className=aClass[i];

varoCur=document.querySelector('.cur');

functiontranEnd(){

oCur.removeEventListener('transitionend',tranEnd,false);

bOk=false;

oCur.addEventListener('transitionend',tranEnd,false);

/script

/head

body

inputtype="button"value="prev"/

inputtype="button"value="next"/

li0/li

li1/li

li2/li

li3/li

li4/li

li5/li

li6/li

li7/li

li8/li

li9/li

li10/li

li11/li