3d照片环效果（修改版--添加了x轴y轴双向转动和修复模糊度的bug）
生活随笔
收集整理的這篇文章主要介紹了
3d照片环效果（修改版--添加了x轴y轴双向转动和修复模糊度的bug）
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
?今天用用前兩天總結的css3新效果寫了一個3d照片環的效果，其中還有些bug大家可以看一看，一起改進。
?
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Title</title><style>*{padding:0;margin:0;list-style:none;}body{background:#000;}#box{width:133px;height:200px;position:absolute;top:40%;left:50%;color:red;margin:-100px 0 0 -67px;transform-style:preserve-3d;transform:perspective(800px) rotateX(-20deg);}#box li{width:100%;height:100%;position:absolute;top:0;left:0;border-radius:10px;background:url('images/img2/1.jpg') no-repeat;transition:1s all ease;-webkit-box-shadow:0 0 5px #fff;-webkit-box-reflect:below 10px -webkit-linear-gradient(rgba(0,0,0,0) 40%,rgba(0,0,0,0.4));transform:rotateY(0deg) translateZ(0px);}</style><script>window.οnlοad=function(){var oUl=document.getElementById('box');var N=11;for(var i=0;i<N;i++){var oLi=document.createElement('li');oLi.style.backgroundImage='url(images/img2/'+(i+1)+'.jpg)';oUl.appendChild(oLi);(function(oLi,i){setTimeout(function(){oLi.style.transition='1s all ease '+(200*(N-i))+'ms';oLi.style.transform='rotateY('+(360/N*i)+'deg) translateZ(300px)';},0);})(oLi,i);}var aLi=oUl.children;var y=0;aLi[0].addEventListener('transitionend',function(){document.οnkeydοwn=function(ev){if(ev.keyCode==37){y-=360/N;keyChange();}else if(ev.keyCode==39){y+=360/N;keyChange();}};},false);aLi[0].addEventListener('transitionend',function(){document.οnmοusedοwn=function(ev){var disX=ev.clientX-y;document.οnmοusemοve=function(ev){y=ev.clientX-disX;for(var i=0;i<aLi.length;i++){keyChange();}};document.οnmοuseup=function(){document.οnmοusemοve=null;document.οnmοuseup=null;};return false;};},false);function keyChange(){for(var i=0;i<aLi.length;i++){aLi[i].style.transition='1s all ease';aLi[i].style.transform='rotateY('+(360/N*i+y)+'deg) translateZ(300px)';var scale=Math.abs((Math.abs(360/N*i+y)-180)/180);//aLi[i].innerHTML=scale;//console.log(scale);aLi[i].style.opacity=scale;}}};</script> </head> <body><ul id="box"></ul> </body> </html>
今天對著效果進行了修復：修復了模糊度旋轉時的bug，添加了ul的轉動，使轉動在x軸和y軸上都可以進行
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Title</title><style>*{padding:0;margin:0;list-style:none;}body{background:#000;}#box{width:133px;height:200px;position:absolute;top:40%;left:50%;color:red;margin:-100px 0 0 -67px;transform-style:preserve-3d;transform:perspective(800px) rotateX(-20deg);}#box li{width:100%;height:100%;position:absolute;top:0;left:0;border-radius:10px;background:url('images/img2/1.jpg') no-repeat;transition:1s all ease;-webkit-box-shadow:0 0 5px #fff;-webkit-box-reflect:below 10px -webkit-linear-gradient(rgba(0,0,0,0) 40%,rgba(0,0,0,0.4));transform:rotateY(0deg) translateZ(0px);}</style><script>window.οnlοad=function(){var oUl=document.getElementById('box');var N=11;for(var i=0;i<N;i++){var oLi=document.createElement('li');oLi.style.backgroundImage='url(images/img2/'+(i+1)+'.jpg)';oUl.appendChild(oLi);(function(oLi,i){setTimeout(function(){oLi.style.transition='1s all ease '+(200*(N-i))+'ms';oLi.style.transform='rotateY('+(360/N*i)+'deg) translateZ(300px)';},0);})(oLi,i);}var aLi=oUl.children;var y=0;var x=-10;aLi[0].addEventListener('transitionend',function(){document.οnkeydοwn=function(ev){if(ev.keyCode==37){y-=360/N;change(y,x);}else if(ev.keyCode==39){y+=360/N;change(y,x);}};},false);aLi[0].addEventListener('transitionend',function(){change(y,-x);document.οnmοusedοwn=function(ev){var disX=ev.clientX-y;var disY=ev.clientY-x;document.οnmοusemοve=function(ev){y=ev.clientX-disX;x=ev.clientY-disY;change(y/3,x/3);};document.οnmοuseup=function(){document.οnmοusemοve=null;document.οnmοuseup=null;};return false;};},false);function change(y,x){for(var i=0;i<aLi.length;i++){aLi[i].style.transition='0s all ease';aLi[i].style.transform='rotateY('+(360/N*i+y)+'deg) translateZ(300px)';oUl.style.transform='perspective(800px) rotateX('+-x+'deg)';var scale=Math.abs(Math.abs((360/N*i+y)%360)-180)/180;//aLi[i].innerHTML=scale;//console.log(scale);scale<0.3&&(scale=0.3);aLi[i].style.opacity=scale;}}};</script> </head> <body><ul id="box"></ul> </body> </html>
轉載于:https://www.cnblogs.com/jasonwang2y60/p/5975770.html
總結
以上是生活随笔為你收集整理的3d照片环效果（修改版--添加了x轴y轴双向转动和修复模糊度的bug）的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： U-boot给kernel传参数和ker
- 下一篇： 分享一下我自己做的新媒体运营月报，有人看