CSS3可以實現很多炫酷的效果,其中之一就是球形旋轉。
.ball { width: 100px; height: 100px; background-color: red; border-radius: 50%; position: relative; animation: spin 2s linear infinite; } @keyframes spin { from {transform: rotateY(0);} to {transform: rotateY(360deg);} }
如上代碼所示,首先我們需要一個圓形的元素,這里使用了border-radius將元素設置為圓形,并設置了背景顏色為紅色。
接下來設置了元素的position為relative,這是為了后面做3D效果的時候方便使用。然后定義了一個動畫,名字叫做spin,持續時間為2秒,使用了ease-in-out的動畫函數,也就是先慢后快再慢,而且動畫會一直無限循環下去。
在@keyframes中,我們定義了動畫的狀態。由于我們要實現的是球形旋轉,所以使用了rotateY這個函數來對元素進行旋轉。從0開始,到360度結束。
最后,我給這個元素加上了.ball的class,這樣就可以觸發球形旋轉的效果了。
總結來說,要實現CSS3的球形旋轉效果,需要一個圓形的元素,設置position為relative,定義動畫,使用rotateY來進行旋轉,最后給這個元素加上class即可。