CSS和JS是實現魔方效果的重要工具，它們的配合能夠讓我們制作出華麗的魔方效果。

/* 魔方的CSS樣式 */
.cube {
width: 400px;
height: 400px;
position: relative;
margin: 40px auto;
transform-style: preserve-3d;
transition: transform 1s;
}
.side {
position: absolute;
border: 2px solid black;
width: 400px;
height: 400px;
display: flex;
justify-content: center;
align-items: center;
background: rgba(255, 255, 255, 0.8);
}
.front {
transform: translateZ(200px);
}
.back {
transform: translateZ(-200px) rotateY(180deg);
}
.top {
transform: rotateX(-90deg) translateY(-200px);
transform-origin: top center;
}
.bottom {
transform: rotateX(90deg) translateY(200px);
transform-origin: bottom center;
}
.left {
transform: rotateY(-90deg) translateX(-200px);
transform-origin: center left;
}
.right {
transform: rotateY(90deg) translateX(200px);
transform-origin: center right;
}

在CSS中我們定義了魔方的大小、外邊距、默認視角及邊框顏色等。我們通過7個面的類名來定義了每個面的樣式，還定義了它們的旋轉角度和旋轉中心，讓它們在旋轉時不會混亂。

/* 魔方的JS代碼 */
const cube = document.querySelector(".cube");
let currentClass = "";
function rotateCube(newClass) {
if (currentClass) {
cube.classList.remove(currentClass);
}
cube.classList.add(newClass);
currentClass = newClass;
}
document.querySelector(".front-btn").addEventListener("click", function() {
rotateCube("show-front");
});
document.querySelector(".back-btn").addEventListener("click", function() {
rotateCube("show-back");
});
document.querySelector(".top-btn").addEventListener("click", function() {
rotateCube("show-top");
});
document.querySelector(".bottom-btn").addEventListener("click", function() {
rotateCube("show-bottom");
});
document.querySelector(".left-btn").addEventListener("click", function() {
rotateCube("show-left");
});
document.querySelector(".right-btn").addEventListener("click", function() {
rotateCube("show-right");
});

在JS中我們通過querySelector來獲取到魔方的DOM，然后在每個按鈕上注冊點擊事件。當我們點擊按鈕時，會去除當前面的類名并添加新的類名，然后儲存下來以便下次使用。這個操作會讓我們的魔方產生一個旋轉的效果，達到類似原版魔方的效果。

通過CSS和JS的實現，我們可以方便地制作出魔方效果。加上一些動畫效果和配合，我們還能開發出更加華麗的特效。