上一篇文章講了利用css3制作3D圖片爆炸效果，現(xiàn)在我們同樣用css3制作3D圖片環(huán)，我們先看一下實現(xiàn)的效果圖：
剛加載出來時每張圖片從中間旋轉(zhuǎn)出來：
Paste_Image.png
旋轉(zhuǎn)完成之后：
Paste_Image.png
還可以拖拽圖片進行旋轉(zhuǎn)！
我們先講一下制作的思路：
首先這些圖片都是有一個一個的li組成的，并且這些li都是js動態(tài)創(chuàng)建出來的（省事，不用一個個去寫了它們的父級UL要開啟3D模式（transform-style:preserve-3d），然后這些li圍繞它的父級Z方向移動一段距離 并且各自旋轉(zhuǎn)不同的角度，那么下面我們來看一下具體實現(xiàn)的代碼：
代碼中每一步都有具體的解釋
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{
margin:0;
padding:0;
}
html,body{
overflow:hidden;
}
body{
background:#000;
}
ul{
width:133px;
height:200px;
position:absolute;
left:50%;
top:50%;
margin-left:-65px;
margin-top:-200px;
/*開啟3D*/
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
/*給Ul加一個初始的角度方便看效果*/
transform:perspective(800px) rotateX(-10deg);
}
ul li{
list-style: none;
width: 100%;
height: 100%;
position: absolute;
left:0;
top:0;
background:url("img2/1.jpg");
/*圖片一圈加陰影*/
box-shadow:0 0 10px #fff;
/*加圓角*/
border-radius:10px;
transform: rotateY(0deg) translateZ(0px);
/*給li加倒影*/
-webkit-box-reflect: below 10px -webkit-linear-gradient(rgba(0,0,0,0) 40%,rgba(0,0,0,.3));
}
</style>
<script>
document.addEventListener('DOMContentLoaded',function(){
var oUl=document.querySelector('#box');
//有多少張圖片就定義多少
var N=11;
for(var i=0; i<N; i++){
var oLi=document.createElement('li');
//給每個li加背景圖片
oLi.style.background='url("img2/'+(i+1)+'.jpg")';
oUl.appendChild(oLi);
//這里加封閉空間是因為for循壞里加定時器，定時器的i值不能用
(function(oLi,i){
//加定時器是因為在for循環(huán)里給每個li加延時效果不管用
setTimeout(function(){
//給每個li加旋轉(zhuǎn)角度
oLi.style.WebkitTransform='rotateY('+(360/N*i)+'deg) translateZ(300px)';
//加過渡時間和延時時間從而加載的時候會出現(xiàn)發(fā)牌效果
oLi.style.WebkitTransition='1s all ease '+(N-i)*200+'ms';
},0);
})(oLi,i);
}
var aLi=oUl.children;
//設(shè)置初始的x,y軸角度
var x=-10;
var y=0;
//拖拽轉(zhuǎn)動
document.onmousedown=function(ev){
var oEvent=ev||event;
var disX=oEvent.clientX-y;
var disY=oEvent.clientY-x;
document.onmousemove=function(ev){
var oEvent=ev||event;
x=oEvent.clientY-disY;
y=oEvent.clientX-disX;
//縱向拖拽是改變的是oUl的X軸
oUl.style.WebkitTransform='perspective(800px) rotateX('+(-x)+'deg)';
for(var i=0; i<aLi.length; i++){
//橫向拖拽是改變的是每個的Y軸 這里要注意要加上每個li的初始角度
aLi[i].style.WebkitTransform='rotateY('+(y+360/N*i)+'deg) translateZ(300px)';
//橫向拖拽時不需要過渡時間直接干掉
aLi[i].style.WebkitTransition='none';
}
};
document.onmouseup=function(){
document.onmousemove=null;
document.onmouseup=null;
};
return false;
};
},false);
</script>
</head>
<body>
<ul id="box">
</ul>
</body>
</html>
