首先來看一下今天的炫酷效果：
首先分析一下這張圖片：
1.每張圖片都有倒影
2.這11張圖片呈圓形均勻排列
3.可旋轉，上下移動（當然這是效果做出來以后，圖片是分析不出來的）
那下面就開始吧。
一。准備
新建三個文件夾分別命名為css,js,img分別存放demo.css，jquery.js、demo.js，11張示例圖片。新建demo.html將demo.css，jquery.js，demo.js引入。
二。圖片倒影制作
1 <div id="wrap"> 2 <img src="img/1.jpg"> 3 <img src="img/2.jpg"> 4 <img src="img/3.jpg"> 5 <img src="img/4.jpg"> 6 <img src="img/5.jpg"> 7 <img src="img/6.jpg"> 8 <img src="img/7.jpg"> 9 <img src="img/8.jpg"> 10 <img src="img/9.jpg"> 11 <img src="img/10.jpg"> 12 <img src="img/11.jpg"> 13 </div>
首先我們新建一個大的div來包裹這11張圖片
*{ padding:0; margin:0; } body{ background:#000; overflow:hidden; } #wrap{ width:133px; height:200px; margin: 200px auto; position:relative; transform-style:preserve-3d; transform:perspective(900px) rotateX(-10deg) rotateY(0deg); } #wrap img{ position:absolute; top:0; left:0; box-shadow: 0 0 10px #FFFFFF; border-radius:10px; box-reflect:below 8px linear-gradient(top,rgba(0,0,0,0) 40%,rgba(0,0,0,.7) 100%); -webkit-box-reflect:below 8px -webkit-linear-gradient(top,rgba(0,0,0,0) 40%,rgba(0,0,0,.7) 100%); }
（1）*這里就不多說了，是為了消除瀏覽器默認的間距。
（2）body屬性設置背景顏色為黑色，溢出隱藏（這里主要是為了不出現滾動條影響圖片整體效果）。
（3）#wrap它的寬高大家一定很好奇為什么會那么小，他的寬高是等同於一張圖片的寬高，這里是為了使后期制作旋轉時候它能夠以圖片自身旋轉而不跑偏（這里大家不明白的話，可以寫完所有代碼后設置一個較大的值，試試就知道了哦）。
margin主要是為了讓圖片水平居中距上下200px。
transform-style:preserve-3d主要是讓圖片展示出3d效果。
transform:perspective(900px)[這個屬性設置鏡頭到元素平面的距離（大家如果不好理解的話就記住這個是利用近大遠小的道理后期可以調節他的大小實驗哦）] rotateX(-10deg)[圍繞x軸旋轉-10°] rotateY(0deg)[圍繞y軸旋轉0°]。告訴大家一個簡單易懂的方法，畫一個平面直角坐標系，這是非常直觀的。
（4）#wrap img是規定了#wrap里面的img屬性，前面的絕對定位是為了讓所有圖片重疊在一起。
box-shadow設置設置了他的陰影效果
border-radius設置了它的圓角大小
box-reflect設置它的倒影效果
這里就不過多陳述css3屬性的用法了，大家可以在w3c查看。
二。使圖片均勻分布
$(function(){ $('#wrap img').each(function(i) { //遍歷 $('#wrap img')----改變他們的css樣式 $(this).css('transform', 'rotateY('+ i*Deg +'deg) translateZ(350px)').attr('ondragstart','return false'); //旋轉以及禁止拖拽復制 }); })
如果設置css屬性有疑問的話，可以這樣想：translateZ(350px)設置了Z軸的距離，把他看成以(0,0)為圓心，350px為半徑的圓，把圖片均勻分布在圓上。
這里設置了圖片禁止拖拽的屬性，與之相呼應的是我們需要的html頁面加上這個屬性
<html onselectstart='return false'>
不加這個的話頁面會報錯。當然如果不加的話不影響現在圖片的顯示，但是會影響下面做圖片的旋轉。
進行到這步為止，圖片上的效果就展示出來了，但是現在是生硬的，沒有動畫，只是靜態的顯示。
三。旋轉、移動圖片
思路：
當鼠標按下並滑動的時候wrap的整體也是跟着滑動的，所以需要記錄鼠標開始到結束的位置，根據鼠標x軸和y軸之間的差值，計算#wrap需要旋轉和移動的大小
$(function(){ var imgL = $('#wrap img').length; //獲取當前的img 長度 var Deg = 360 / imgL; // 360/imgL 和角度有關系 var roY = 0,roX = -10,xN,yN; $(document).mousedown(function(ev){ //綁定事件 鼠標按下時觸發的時間 var x_ = ev.clientX; //獲取當前鼠標相對於瀏覽器頁面（或客戶區）的 x 方向的位置 保存在變量 x_ var y_ = ev.clientY; //………………y方向的位置 保存在變量y_ $(this).bind('mousemove',function(ev){ //給當前元素 （這里的當前元素是document ）綁定 mousemove（鼠標在當前元素內移動的事件） var x = ev.clientX; //獲取當前鼠標相對於瀏覽器頁面（或客戶區）的 x 方向的位置 保存在變量 x var y = ev.clientY; //………………y方向的位置 保存在變量y xN = x - x_; //計算鼠標在當前元素內 相對 上次鼠標按下時的 x軸距離 並保存在變量 yN = y - y_; //計算鼠標在當前元素內 相對 上次鼠標按下時的 y軸距離 並保存在變量 roY += xN*0.2; //按照比例換算 並在變量基礎上增加（圍繞Y軸旋轉的角度，之所以乘0.2是為了不讓自己的鼠標動作太敏感，可以改變數值試一下，理解個中含義） roX +=yN*0.07; //按照比例換算 並在變量基礎上增加（圍繞x軸旋轉的角度，意義同上） $('#wrap').css('transform','perspective(800px) rotateX('+ roX +'deg) rotateY('+ roY +'deg)'); //$('#wrap') 改變css動畫transform樣式 值為…………角度是變量roY,roX的 x_ = ev.clientX; //並將鼠標按下的位置設置成當前移動到的位置 y_ = ev.clientY; //並將鼠標按下的位置設置成當前移動到的位置 }); }).mouseup(function(){ //綁定事件 鼠標松開時觸發的時間 $(this).unbind('mousemove'); // 移除 當前元素（這里的當前元素是document ）的 mousemove（鼠標在當前元素內移動的事件） });
});
注釋講的很清楚，這里就不過多贅述了，到現在已經可以看到效果了，按住鼠標左鍵上下拖動試試吧。
但是到此為止看到的效果又顯得很生硬，不流暢，所以為他加個定時器，來讓圖片真正的轉動起來。
$(function(){ var imgL = $('#wrap img').size(); //獲取當前的img 長度 console.log($('#wrap img').size()); var Deg = 360 / imgL; // 360/imgL 和角度有關系 var roY = 0,roX = -10,xN,yN,play=null; //挨個賦值 $('#wrap img').each(function(i) { //遍歷 $('#wrap img')----改變他們的css樣式 $(this).css('transform', 'rotateY('+ i*Deg +'deg) translateZ(350px)') .attr('ondragstart','return false'); //旋轉以及禁止拖拽復制 }); $(document).mousedown(function(ev){ //綁定事件 鼠標按下時觸發的時間 clearInterval( play ); //關閉計時器(play) var x_ = ev.clientX; //獲取當前鼠標相對於瀏覽器頁面（或客戶區）的 x 方向的位置 保存在變量 x_ var y_ = ev.clientY; //………………y方向的位置 保存在變量y_ $(this).bind('mousemove',function(ev){ //給當前元素 （這里的當前元素是document ）綁定 mousemove（鼠標在當前元素內移動的事件） var x = ev.clientX; //獲取當前鼠標相對於瀏覽器頁面（或客戶區）的 x 方向的位置 保存在變量 x var y = ev.clientY; //………………y方向的位置 保存在變量y xN = x - x_; //計算鼠標在當前元素內 相對 上次鼠標按下時的 x軸距離 並保存在變量 yN = y - y_; //計算鼠標在當前元素內 相對 上次鼠標按下時的 y軸距離 並保存在變量 roY += xN*0.2; //按照比例換算 並在變量基礎上增加 roX +=yN*0.07; //按照比例換算 並在變量基礎上增加 $('#wrap').css('transform','perspective(800px) rotateX('+ roX +'deg) rotateY('+ roY +'deg)'); //$('#wrap') 改變css動畫transform樣式 值為…………角度是變量roY,roX的 x_ = ev.clientX; //並將鼠標按下的位置設置成當前移動到的位置 y_ = ev.clientY; //並將鼠標按下的位置設置成當前移動到的位置 }); }).mouseup(function(){ //綁定事件 鼠標松開時觸發的時間 $(this).unbind('mousemove'); // 移除 當前元素（這里的當前元素是document ）的 mousemove（鼠標在當前元素內移動的事件） play = setInterval(function(){ //開始周期性計時器 xN = xN * 0.95; //按照比例換算 yN = yN * 0.95; //按照比例換算 if ( Math.abs(xN) <= 0.5 && Math.abs(yN)<= 0.5 ) //判斷 (xN的絕對值<=0.5)而且 yN的絕對值也要<= 0.5)的時候就執行下面的語句 { clearInterval( play ); //關閉計時器(play) } roY += xN*0.2; //按照比例換算 並在變量基礎上增加 roX +=yN*0.07; //按照比例換算 並在變量基礎上增加 $('#wrap').css('transform','perspective(800px) rotateX('+ roX +'deg) rotateY('+ roY +'deg)'); //$('#wrap') 改變css動畫transform樣式 值為…………角度是變量roY,roX的 },30); //計時器每30毫秒觸發一次 }); });
這里為了比較直觀定時器放在哪里，重復了上面的代碼。
解釋一下定時器：
當鼠標松開的時候如果沒有定時器的話，旋轉就到此為止了，但是這並不是這個效果想要的，當鼠標滑動幅度較大的時候，圖片整體也會旋轉不同角度，距離越大旋轉的角度也就越大，並且到一定數值后讓定時器停下來，代碼與上面旋轉的類似，這里不過多贅述。這里注意的是，一定要定時器停下來。乘不同數值會有不同的效果，如果不是很理解的話，改變數值看效果是你最好的選擇，最近狀態不好，思路可能沒有之前寫的好，請見諒/(ㄒoㄒ)/~~