CSS中的長方體旋轉是通過transform屬性來實現的。我們可以使用transform屬性中的rotateX和rotateY來旋轉長方體。其中，rotateX會繞X軸旋轉，rotateY會繞Y軸旋轉。

.cube {
width: 100px;
height: 100px;
transform-style: preserve-3d;
animation: spin 3s linear infinite;
}
.cube .face {
width: 100%;
height: 100%;
position: absolute;
text-align: center;
font-size: 30px;
line-height: 100px;
color: white;
}
.cube .front {
background-color: #06c;
transform: translateZ(50px);
}
.cube .back {
background-color: #f60;
transform: rotateX(180deg) translateZ(50px);
}
.cube .right {
background-color: #c06;
transform: rotateY(90deg) translateZ(50px);
}
.cube .left {
background-color: #60c;
transform: rotateY(-90deg) translateZ(50px);
}
.cube .top {
background-color: #ccc;
transform: rotateX(90deg) translateZ(50px);
}
.cube .bottom {
background-color: #333;
transform: rotateX(-90deg) translateZ(50px);
}
@keyframes spin {
0% {transform: rotateX(0deg) rotateY(0deg);}
100% {transform: rotateX(360deg) rotateY(360deg);}
}

上面的代碼演示了一個帶動畫的長方體旋轉效果。其中，我們使用了一個div元素，通過在里面添加六個面（使用div元素分別表示）來構成長方體。每個面使用position: absolute;來定位，同時使用transform屬性中的 translateZ、rotateX和rotateY來調整位置和角度。

通過給長方體容器加上 animation: spin 3s linear infinite; 屬性，可以讓長方體圍繞自身旋轉。其中，spin表示動畫名稱，3s表示動畫間隔時間，linear表示動畫的速度線性變化，infinite表示無限次循環。

除了這個例子之外，我們還可以使用transform屬性來實現更多有趣的3D效果。 CSS的旋轉變換是一種非常有趣的技術，可以讓我們的網站更加生動、立體化，更能夠吸引用戶的視覺注意力。