今天用用前两天总结的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>
![[deviceone开发]-do_RichLabel的简单示例](http://pic.xiahunao.cn/[deviceone开发]-do_RichLabel的简单示例)
)
![【WPF学习笔记】[转]周银辉之WPF中的动画 晓风影天之wpf动画——new PropertyPath属性链...](http://pic.xiahunao.cn/【WPF学习笔记】[转]周银辉之WPF中的动画 晓风影天之wpf动画——new PropertyPath属性链...)
