旋轉的正方體 CSS3是一種非常有趣的技術，可以制作出獨特、酷炫的動畫效果。這種技術一般使用CSS3中的Transform屬性實現。

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

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