CSS中可以使用transform屬性來實現3D效果，很多人都喜歡利用這個特性創建出各種立體圖形。今天我來分享一下在CSS中如何制作一個高逼格的3D球。

.ball {
position: relative;
perspective: 1000px;
transform-style: preserve-3d;
animation: rotate 5s linear infinite;
}
.ball:before,
.ball:after {
content: "";
display: block;
position: absolute;
width: 100%;
height: 100%;
border-radius: 50%;
background-color: #ff6a5c;
}
.ball:before {
transform: translateZ(-24px);
}
.ball:after {
transform: translateZ(24px);
}
@keyframes rotate {
0% {
transform: rotateX(0) rotateY(0);
}
100% {
transform: rotateX(360deg) rotateY(360deg);
}
}

首先需要在HTML中添加一個div容器，用于包裹整個球體結構。在CSS中定義perspective屬性，來使得透視效果更加明顯。另外transform-style:preserve-3d屬性用于保持3D空間中的效果。

接下來，在球體容器（即div）上定義before和after偽元素，來分別實現球體的正面和反面，并且這兩個元素的z軸坐標相差48px，從而形成球體。

最后，在before和after元素上定義border-radius屬性，使得它們呈現圓形，并設置背景顏色。通過在球體容器上定義rotate動畫，使球體不斷地繞著X軸和Y軸旋轉。

以上就是制作3D球的全部代碼，將它們復制到你的CSS文件中，就可以愉快地啟動調試模式，觀察自己的3D球體的旋轉效果啦！