通過rotateY設置的元素都會擠在同一個點上，需要拉開空間
三張圖都在需要分布在不同的方向，呈現出一個圓形包圍，這里可以采用translateZ處理。translateZ()函數是沿著垂直的Z軸方向平移，它可以讓3D空間由前往后運作。假設自己作為觀察者，觀察著電腦屏幕上的某個元素，translateZ函數的正向值（越來越大的值）令元素更靠近觀察者，負向值則遠離觀察者。
translateZ的計算公式
可以通過translateZ改變元素的透視距離，那么到底應該設置多少合適呢？
我們只需要求出邊界到中心的距離，讓3個圖片圍成一個圓形，那么每一個面的角度就是120°，長度是200px。換句話說一個面是有2個60°的直邊三角形組成的。那么每一個直邊三角形就是100px了，translateZ是直徑距離，所以需要算出直邊三角形的"鄰邊"距離
100 / Math.tan(60 / 180 * Math.PI) ≈ 57
實際上，我們會根據這個57px的距離會有一定的浮動，當然最終可以轉化成rem去計算了
旋轉原理
布局完成后旋轉就比較簡單了，只需要控制父節點的rotateY角度變化就可以了，注意因為是3張圖，所以每次變化的角度應該是120°，這樣才能保持每張圖旋轉的角度的正確性。具體可以參考右邊代碼的實現
在index.html文件代碼32中行填入任務代碼
給id=spinner的元素設置rotateY屬性, 角度是傳入的angle變量，變化的時間是1秒
$("#spinner")
.css({
"transform": "rotateY(-" + angle + "deg)",
"transition":"1s"
})
.css({
"-moz-transform": "rotateY(-" + angle + "deg)",
"-moz-transition":"1s"
})
請驗證，完成請求
由于請求次數過多，請先驗證，完成再次請求
打開微信掃碼自動綁定
綁定后可得到
使用 Ctrl+D 可將課程添加到書簽
舉報
