CSS3 3D transform變換

標籤：alt   實際應用   螺旋狀   屬性   簡單   容器   ram   code   http   

 

、實際應用-圖片的旋轉木馬效果

您可以狠狠地點擊這裡：圖片的旋轉木馬效果demo

建議在足夠新版本的FireFox瀏覽器或Safari瀏覽器下觀看，Chrome可能需要置中定位查看，為效果縮圖：

原理：
那些看上去很酷酷的CSS3 3D效果其實就顛來倒去那幾個屬性（本文提到的這幾個），折騰來折騰去，這裡這個效果顯然也是如此。

首先HTML結構，如下：

舞台    容器        圖片        圖片        圖片        ...

對於舞台，很簡單，加個視距，比方說800像素：

 perspective: 800px;

對於容器，很簡單，加個3D視圖聲明，如下：

transform-style: preserve-3d;

然後就是圖片們了。為了不至於產生類似DNA的螺旋狀效果，我們讓所有圖片position:absolute，公用同一個中心點。

顯然，圖片旋轉木馬是類似鋼管舞旋轉的運動，因此，我們關心的是rotateY的大小。

因為要正好繞成一個圈，因此，圖片rotateY值正好0~360等分，於是，如果有9張圖片，則每個圖片的旋轉角度累加40(360 / 9 = 40)度即可。因此有：

img:nth-child(1) { transform: rotateY(   0deg ); }img:nth-child(2) { transform: rotateY(  40deg ); }img:nth-child(3) { transform: rotateY(  80deg ); }img:nth-child(4) { transform: rotateY( 120deg ); }img:nth-child(5) { transform: rotateY( 160deg ); }img:nth-child(6) { transform: rotateY( 200deg ); }img:nth-child(7) { transform: rotateY( 240deg ); }img:nth-child(8) { transform: rotateY( 280deg ); }img:nth-child(9) { transform: rotateY( 320deg ); }

這樣就好了嗎？

No, No, No!!!

想想看那，雖然9個絕色美女每個人的方位不一樣，但都站在同一個點上，早就擠作一團，A罩都擠成C了，顯然是不行的（見只設定rotateY）！我們需要拉開空間~~

如何拉開空間，很簡單。

想想看那：9個美女，分別面朝東南西北共9個不同方位，她們只要每個人向前走個4~5步，美女們之間的空間不久拉開了，呈現圓形了！想象一下夜空中，禮花綻開的情境~~

這裡的向前走4~5步，聰明的人應該已經知道了，就是本文提到的translateZ, 當translateZ為正值的時候，元素會向其面對的方向走去；如果元素無旋轉，就會朝顯示器走來！！

現在只剩下一個問題了，美女們要向前走多遠呢？？

這個距離是有計算公式滴！

拿本demo距離，每張美女圖片的寬度是128像素，因此，有如下理想方位：

中紅色標註的r就是的demo頁面中圖片要translateZ的理想值（該值可以讓所有圖片無縫圍成一個圓）！

r的計算很簡單，有初中數學水平的人應該都會：

r = 64 / Math.tan(20 / 180 * Math.PI) ≈ 175.8

demo頁面為了好看，圖片之間留了點間距，使用的translateZ的值為175.8 + 20 = 195.8.

 

CSS3 3D transform變換