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.onload=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.onkeydown=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.onmousedown=function(ev){
var disX=ev.clientX-y;
document.onmousemove=function(ev){
y=ev.clientX-disX;
for(var i=0;i<aLi.length;i++){
keyChange();
}
};
document.onmouseup=function(){
document.onmousemove=null;
document.onmouseup=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.onload=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.onkeydown=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.onmousedown=function(ev){
var disX=ev.clientX-y;
var disY=ev.clientY-x;
document.onmousemove=function(ev){
y=ev.clientX-disX;
x=ev.clientY-disY;
change(y/3,x/3);
};
document.onmouseup=function(){
document.onmousemove=null;
document.onmouseup=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>
