CSS酷炫魔方是一個非常有趣的CSS效果，它可以通過CSS實現立方體的翻轉效果，讓頁面更具層次感。下面我們來看一下它的代碼實現。

.cube {
width: 200px;
height: 200px;
position: relative;
transform-style: preserve-3d;
transition: transform 1s;
}
.cube__face {
position: absolute;
width: 200px;
height: 200px;
background-color: #333333;
}
.cube__face--front {
transform: translateZ(100px);
}
.cube__face--back {
transform: translateZ(-100px) rotateY(180deg);
}
.cube__face--top {
transform: rotateX(-90deg) translateZ(100px);
}
.cube__face--bottom {
transform: rotateX(90deg) translateZ(100px);
}
.cube__face--left {
transform: rotateY(-90deg) translateZ(100px);
}
.cube__face--right {
transform: rotateY(90deg) translateZ(100px);
}
.cube:hover {
transform: rotateY(360deg);
}

在上面的代碼中，我們創建了一個寬高為200px的立方體容器，并設置了相對定位以及3D保存效果。接著，我們通過絕對定位創建了6個面，分別為前后左右上下，每個面都使用translateZ指定了它們在z軸上的位置。

在:hover時，我們通過transform來實現立方體的翻轉效果，這里使用了rotateY屬性來指定翻轉的角度。

使用CSS酷炫魔方，可以為頁面增加趣味性和層次感，同時也可以提高網站的交互性和用戶體驗。