用css3畫3d動畫的思路

標籤：包含   太陽系   設定   使用   orm   style   reserve   圖片   容器   

    最近試了下CSS3動畫，現在通過一個例子簡單講一講我用css3畫3d視圖的思路。

    任何時候敲代碼前都要想清楚我要幹什麼，我要敲一個簡單的3d旋轉畫冊。

 

一、

    1.首先用一個總容器包含所有的圖片，設定屬性perspective: 1000px，表示他距離我們螢幕1000px的距離，從二維變成了三維

    2.要使用3d旋轉，必先要有一個參考系使所有圖片圍繞他旋轉，在總容器裡面加一個div，添加屬性transform-style: preserve-3d就可以變成參考系。

    3.然後在這個div裡設定動畫效果不斷旋轉animation: rotation 18s infinite linear

    4.把所有圖片放進這個div裡面，控製圖片距離這個div的距離translateZ( XXpx )，所有圖片就像太陽系一樣圍繞旋轉了

    5.但是這裡有一個缺點，圖片還不夠立體，因為旋轉時圖片角度沒有變化，這就需要我們改變每個圖片的角度

 

二、

1.黃色是總容器contain

2.藍色是參考系carousel

 

3.

用css3畫3d動畫的思路