在CSS中，我們可以使用transform屬性來(lái)實(shí)現(xiàn)立方體的旋轉(zhuǎn)效果。

.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中創(chuàng)建一個(gè)立方體的結(jié)構(gòu)，可以使用6個(gè)div來(lái)組成每個(gè)面，然后將它們放置在一個(gè)具有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>

接下來(lái)，我們可以為立方體每個(gè)面指定不同的transform屬性來(lái)實(shí)現(xiàn)3D效果，并通過(guò)animate屬性來(lái)實(shí)現(xiàn)旋轉(zhuǎn)動(dòng)畫(huà)。實(shí)現(xiàn)代碼如下：

.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);
}
}

這樣，一個(gè)帶有旋轉(zhuǎn)動(dòng)畫(huà)的3D立方體就成功實(shí)現(xiàn)了。