控制圖片換有兩種方法，分別是鍵盤和鼠標(biāo)。
倒影控制-webkit-box-reflect:below 10px -webkit-linear-gradient(rgba(0,0,0,0) 40%,rgba(0,0,0,0.4));其中圖片倒影分上下左右，below是倒影在圖片下方 10px是距離圖片10成倒影
3d成立體圖transform-style:preserve-3d;注意只能定在父級(jí)
圖片初始向下transform:perspective(800px) rotateX(-10deg);
思路：定義多少的圖片N,for循環(huán)定義圖片背景，圖片定義一段時(shí)間出來(lái)timeout設(shè)定運(yùn)動(dòng)，鍵盤keydown控制下定義轉(zhuǎn)的角度y，循環(huán)定義分別運(yùn)動(dòng)距離和角度。
鍵盤控制圖片環(huán)：
*{
margin:0;
padding:0;
list-style:none;
}
body,html{
background:#000;
overflow:hidden;
}
ul{
width:133px;
height:200px;
position:absolute;
left:50%;
top:50%;
margin:-100px 0 0 -67px;
transform-style:preserve-3d;
transform:perspective(800px) rotateX(-10deg);
}
li{
width:133px;
height:200px;
border-radius:8px;
background:url("img2/1.jpg") no-repeat;
transition:1s all ease;
transform:rotateY(0deg) translateZ(0px);
-webkit-box-reflect:below 10px -webkit-linear-gradient(rgba(0,0,0,0) 40%,rgba(0,0,0,0.4));
-webkit-box-shadow:0 0 16px #fff;
position:absolute;
}
</style>
<script>
document.addEventListener('DOMContentLoaded',function(){
var oUl=document.querySelector('#ul1');
var N=11;
for(var i=0;i<N;i++){
var aLi=document.createElement('li');
aLi.style.backgroundImage='url("img2/'+(i+1)+'.jpg")';
oUl.appendChild(aLi);
(function(aLi,i){
setTimeout(function(){
aLi.style.transform='rotateY('+360/N*i+'deg) translateZ(300px)';
aLi.style.transition='1s all ease '+(N-i)*200+'ms';
},0)
})(aLi,i);
}
//鍵盤控制
var aL=oUl.children;
var y=0;
document.onkeydown=function(ev){
var oEvent=ev||event;
if(oEvent.keyCode==37){
y-=360/N;
for(var i=0;i<aL.length;i++){
aL[i].style.transform='rotateY('+(360/N*i+y)+'deg) translateZ(300px)';
aL[i].style.transition='1s all ease';
}
}else{
y+=360/N;
for(var i=0;i<aL.length;i++){
aL[i].style.transform='rotateY('+(360/N*i+y)+'deg) translateZ(300px)';
aL[i].style.transition='1s all ease';
}
}
};
},false);
</script>
<body>
<ul id="ul1"></ul>
</body>
鼠標(biāo)移動(dòng)拖動(dòng)圖片環(huán)
*{
margin:0;
padding:0;
list-style:none;
}
body,html{
background:#000;
overflow:hidden;
}
ul{
width:133px;
height:200px;
position:absolute;
left:50%;
top:50%;
margin:-100px 0 0 -67px;
transform-style:preserve-3d;
transform:perspective(800px) rotateX(-10deg);
}
li{
width:133px;
height:200px;
border-radius:8px;
background:url("img2/1.jpg") no-repeat;
transition:1s all ease;
transform:rotateY(0deg) translateZ(0px);
-webkit-box-reflect:below 10px -webkit-linear-gradient(rgba(0,0,0,0) 40%,rgba(0,0,0,0.4));
-webkit-box-shadow:0 0 16px #fff;
position:absolute;
}
</style>
<script>
document.addEventListener('DOMContentLoaded',function(){
var oUl=document.querySelector('#ul1');
var N=11;
for(var i=0;i<N;i++){
var aLi=document.createElement('li');
aLi.style.backgroundImage='url("img2/'+(i+1)+'.jpg")';
oUl.appendChild(aLi);
(function(aLi,i){
setTimeout(function(){
aLi.style.transform='rotateY('+360/N*i+'deg) translateZ(300px)';
aLi.style.transition='1s all ease '+(N-i)*200+'ms';
},0)
})(aLi,i);
}
//鼠標(biāo)控制
var aL=oUl.children;
var y=0;
document.onmousedown=function(ev){
var oEvent=ev||event;
var disX=oEvent.clientX-y;
document.onmousemove=function(ev){
var oEvent=ev||event;
y=oEvent.clientX-disX;
change(aL,y/3);
};
document.onmouseup=function(){
document.onmousemove=null;
document.onmouseup=null;
};
return false;
};
function change(aL,y){
for(var i=0;i<aL.length;i++){
aL[i].style.transform='rotateY('+(360/N*i+y)+'deg) translateZ(300px)';
aL[i].style.transition='none';
}
}
},false);
</script>
<body>
<ul id="ul1"></ul>
</body>
