js实现三维(三维的缩写)图片展示效果

点击左上角的按钮前后切换

效果图：

代码如下：

！doctype html html head meta charset=' UTF-8 ' title title/title style * { margin :0；划水：0;列表式：无；} ul { width:300px高度：300 pxmargin:100px汽车位置：相对；-web套件-转换-style : preserve-3d；透视图：800 px} ul Li { position : absolutetop :0 left :0宽度：100%;高度：100%;文本对齐：居中；线高：300 pxfont-size :50 px背景技术： # 399;border:1px固体# 000;opa city 33600 } . L2 { opa city 33600-web kit-transform : translate(-280 px，0)Rotatey(45)；z索引：3;} . L1 { opa city 33601-web kit-transform : translate(-220 px，0)Rotatey(45)；z索引：4;}.cur { opa city 33601-web kit-transform : translatez(50px)；z索引：5;} . R1 { opa city 33601-web kit-transform : translate(220 px，0)Rotatey(-45)；z索引：4;} . R2 { opa city 33600-web kit-transform : translate(280 px，0)Rotatey(-45)；z索引：3;}/style脚本窗口。onload=function(){ var oPrev=document。queryselector(' .普雷夫_ BTN’；var oNext=文档。queryselector(' .下一个_ BTN’；var AlI=文档。query selectorall(' ul Li ')；var AClass=[]；for(var I=0；IAli . len thi){ AClass[I]=AlI[I].className} var bOk=falseoprev。onclick=function(){ if(BOk)return；bOk=真；混蛋。推(aclass。shift())；change()；};下一个。onclick=function(){ if(BOk)return；bOk=真；混蛋。unshift(a lass。pop())；change()；};函数change(){ for(var I=0；iLi . LengiI){ AlI[I]。风格。webkittransition=。5s全部放松'；aLi[i].类名=AClass[I]；} var oCur=document。queryselector(' .cur’)；函数tranEnd(){ ocur。removeeventlistener(' transitionend '，tranEnd，false)；bOk=false} ocur。addeventlistener(' transitionend '，tranEnd，false)；}};/脚本/流浆池输入类型='按钮'值='prev' class='prev_btn' /输入类型='按钮'值=' next ' class=' next _ BTN '/ul Li class=' L2 ' 0/Li Li class=' L1 ' 1/Li Li class=' cur ' 2/Li Li class=' R1 ' 3/Li Li class=' R2 ' 4/Li Li 5/Li Li 6/Li Li 7/Li Li 8/Li Li 9/Li Li 10/Li Li 11/Li Li 12以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持我们！