CSS 3D球形旋轉是Web開發中非常酷炫的特效之一,通過實現球體的三維旋轉,增強了頁面的視覺感受。以下是一個簡單的CSS 3D球形旋轉示例:
.ball-container { perspective: 1000px; } .ball { position: relative; transform-style: preserve-3d; animation: rotate 5s linear infinite; } .ball:before, .ball:after { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .ball:before { transform: rotateY(45deg) rotateX(35deg) translateZ(50px); background-color: #f44336; } .ball:after { transform: rotateY(135deg) rotateX(35deg) translateZ(50px); background-color: #2196f3; } @keyframes rotate { 0% { transform: rotateX(0) rotateY(0) rotateZ(0); } 100% { transform: rotateX(360deg) rotateY(360deg) rotateZ(360deg); } }
以上代碼中,我們通過設置perspective屬性給父容器提供了一個自然的Z軸透視感,而子元素.ball通過設置transform-style屬性為preserve-3d來告訴瀏覽器這是一個具有3D變形的元素。我們還定義了兩個偽元素:before和:after來作為球體的兩個面,并設置旋轉角度和背景色。
最后我們使用@keyframes來定義一個無限循環的rotate動畫,同時在.ball元素上應用這個動畫可以讓球體不停地旋轉。