旋轉(zhuǎn)的正方體 CSS3是一種非常有趣的技術(shù)，可以制作出獨(dú)特、酷炫的動(dòng)畫(huà)效果。這種技術(shù)一般使用CSS3中的Transform屬性實(shí)現(xiàn)。

.box {
position: relative;
width: 200px;
height: 200px;
transform-style: preserve-3d;
animation: rotate 4s infinite linear;
}
.box >div {
position: absolute;
width: 200px;
height: 200px;
background-color: #ccc;
box-shadow: inset 0 0 10px rgba(0,0,0,0.5);
}
.box .front {
transform: translateZ(100px);
}
.box .back {
transform: translateZ(-100px) rotateY(180deg);
}
.box .right {
transform: rotateY(90deg) translateZ(100px);
}
.box .left {
transform: rotateY(-90deg) translateZ(100px);
}
.box .top {
transform: rotateX(90deg) translateZ(100px);
}
.box .bottom {
transform: rotateX(-90deg) translateZ(100px);
}
@keyframes rotate {
0% {
transform: rotateY(0);
}
100% {
transform: rotateY(360deg);
}
}

以上是一段實(shí)現(xiàn)CSS3旋轉(zhuǎn)正方體的代碼。我們定義了一個(gè)名為.box的元素，將Transform屬性設(shè)置為preserve-3d，這可以保證3D轉(zhuǎn)換效果的疊加。接著我們定義了六個(gè)子元素，分別代表了正方體的六個(gè)面，使用Transform屬性的translateZ()和rotateX()、rotateY()方法進(jìn)行了位置和旋轉(zhuǎn)的設(shè)置。最后，我們使用了CSS3的animation屬性，通過(guò)關(guān)鍵幀動(dòng)畫(huà) rotate 實(shí)現(xiàn)了旋轉(zhuǎn)效果。