在CSS中，我們可以使用transform屬性來實現立方體的旋轉效果。

.cube {
width: 100px;
height: 100px;
position: relative;
transform-style: preserve-3d;
animation: rotate 5s linear infinite;
}
.cube .face {
position: absolute;
width: 100%;
height: 100%;
opacity: 0.7;
border: 2px solid #000;
}
.cube .front {
transform: translateZ(50px);
}
.cube .back {
transform: translateZ(-50px) rotateY(180deg);
}
.cube .right {
transform: rotateY(90deg) translateZ(50px);
}
.cube .left {
transform: rotateY(-90deg) translateZ(50px);
}
.cube .top {
transform: rotateX(90deg) translateZ(50px);
}
.cube .bottom {
transform: rotateX(-90deg) translateZ(50px);
}
@keyframes rotate {
from {
transform: rotateY(0deg);
}
to {
transform: rotateY(360deg);
}
}

首先，在HTML中創建一個立方體的結構，可以使用6個div來組成每個面，然后將它們放置在一個具有transform-style屬性的父元素中。

<div class="cube">
<div class="face front"></div>
<div class="face back"></div>
<div class="face right"></div>
<div class="face left"></div>
<div class="face top"></div>
<div class="face bottom"></div>
</div>

接下來，我們可以為立方體每個面指定不同的transform屬性來實現3D效果，并通過animate屬性來實現旋轉動畫。實現代碼如下：

.front {
transform: translateZ(50px);
}
.back {
transform: translateZ(-50px) rotateY(180deg);
}
.right {
transform: rotateY(90deg) translateZ(50px);
}
.left {
transform: rotateY(-90deg) translateZ(50px);
}
.top {
transform: rotateX(90deg) translateZ(50px);
}
.bottom {
transform: rotateX(-90deg) translateZ(50px);
}
.cube {
width: 100px;
height: 100px;
position: relative;
transform-style: preserve-3d;
animation: rotate 5s linear infinite;
}
@keyframes rotate {
from {
transform: rotateY(0deg);
}
to {
transform: rotateY(360deg);
}
}

這樣，一個帶有旋轉動畫的3D立方體就成功實現了。