CSS是一種網頁樣式表語言，它可以幫助我們優雅地展示網頁的內容。今天我們來探討一下如何用CSS畫出魔方。

以上是我們要繪制的魔方結構，我們用CSS來繪制每一個面。

.magic-cube {
width: 150px;
height: 150px;
position: relative;
transform-style: preserve-3d;
}
.face {
width: 100%;
height: 100%;
position: absolute;
border: 1px solid black;
box-sizing: border-box;
backface-visibility: hidden;
}
.front {
transform: translateZ(75px);
}
.back {
transform: translateZ(-75px) rotateY(180deg);
}
.top {
transform: rotateX(90deg) translateZ(75px) translateY(-75px);
}
.bottom {
transform: rotateX(-90deg) translateZ(75px) translateY(75px);
}
.left {
transform: rotateY(-90deg) translateZ(75px) translateX(-75px);
}
.right {
transform: rotateY(90deg) translateZ(75px) translateX(75px);
}
.square {
width: 48px;
height: 48px;
background-color: white;
box-sizing: border-box;
border: 1px solid darkgrey;
position: absolute;
}
.front .square:nth-child(1) {
transform: translateZ(38px);
top: 2px;
left: 2px;
}
.front .square:nth-child(2) {
transform: translateZ(38px);
top: 2px;
left: 52px;
}
.front .square:nth-child(3) {
transform: translateZ(38px);
top: 52px;
left: 2px;
}
.front .square:nth-child(4) {
transform: translateZ(38px);
top: 52px;
left: 52px;
}

以上是CSS代碼的主要部分，我們使用transform屬性來控制元素的位置和旋轉。backface-visibility屬性可以讓元素背面不可見，避免了反面的影響。

通過上面的代碼，我們可以成功地用CSS畫出魔方，并且還可以通過改變transform屬性的值來實現魔方的旋轉和變化。