CSS三維球體是通過使用CSS3中的transform屬性和過渡效果來創(chuàng)建的美觀的球體。利用這些屬性，可以讓球體在網(wǎng)頁中產(chǎn)生生動(dòng)的動(dòng)畫效果。

/* 創(chuàng)建球體的基本樣式 */
.ball {
width: 100px;
height: 100px;
background-color: red;
border-radius: 50%;
position: relative;
transform-style: preserve-3d;
}
/* 添加球體陰影效果 */
.ball::after {
content: "";
position: absolute;
left: 10px;
top: 10px;
width: 80px;
height: 80px;
background-color: rgba(0, 0, 0, 0.5);
border-radius: 50%;
transform: translateZ(-1px);
}
/* 制作球體的過渡動(dòng)畫效果 */
.ball:hover {
transform: rotateX(360deg) rotateY(360deg);
transition: transform 2s;
}

以上CSS代碼中，基本樣式使用border-radius屬性和寬度、高度設(shè)置為100px來實(shí)現(xiàn)球體的形狀。position屬性的值設(shè)置為relative，以便后續(xù)添加陰影效果以及制作動(dòng)畫效果。transform-style屬性的值設(shè)置為preserve-3d，以便后續(xù)創(chuàng)建3D動(dòng)畫效果。陰影效果使用偽元素::after在球體上疊加一個(gè)陰影層，利用了CSS3中的translateZ屬性。

最后，添加球體的過渡動(dòng)畫效果。當(dāng)鼠標(biāo)懸停在球體上時(shí)，利用rotateX和rotateY屬性制作旋轉(zhuǎn)動(dòng)畫效果，并使用transition屬性設(shè)置變化的時(shí)間為2秒。