轉載 丨 好吧,CSS3 3D transform變換,不過如此!

然後就是圖片們了。為了不至於產生類似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 ); }