CSS3是一種重要的網頁設計語言，可以制作許多精彩的特效和動畫效果，例如魔方。魔方是一種非常有趣的游戲，我們可以使用CSS3來制作一個真實的3D魔方。

/*設置容器*/
.cube{
width: 200px;
height: 200px;
position: relative;
perspective: 500px;
}
/*設置面*/
.cube .face{
position: absolute;
width: 200px;
height: 200px;
text-align: center;
line-height: 200px;
font-size: 50px;
font-weight: bold;
}
/*設置六個面的樣式*/
.cube .front{
transform: translateZ(100px);
background-color: #ffbb91;
}
.cube .back{
transform: rotateY(180deg) translateZ(100px);
background-color: #a5d6a7;
}
.cube .left{
transform: rotateY(-90deg) translateZ(100px);
background-color: #f48fb1;
}
.cube .right{
transform: rotateY(90deg) translateZ(100px);
background-color: #90caf9;
}
.cube .top{
transform: rotateX(90deg) translateZ(100px);
background-color: #f06292;
}
.cube .bottom{
transform: rotateX(-90deg) translateZ(100px);
background-color: #e0e0e0;
}
/*設置鍵盤控制*/
body{
font-size: 24px;
}
/*前方*/
.front-face{
transform: rotateY(0deg) translateZ(102px);
}
/*背方*/
.back-face{
transform: rotateY(180deg) translateZ(102px);
}
/*左方*/
.left-face{
transform: rotateY(90deg) translateZ(102px);
}
/*右方*/
.right-face{
transform: rotateY(-90deg) translateZ(102px);
}
/*上方*/
.top-face{
transform: rotateX(-90deg) translateZ(102px);
}
/*下方*/
.bottom-face{
transform: rotateX(90deg) translateZ(102px);
}

首先需要一個容器，我們將容器定義為200像素的正方形，并設置relative的位置以便放置6個面。然后，我們在CSS內為六個面設置基本的樣式，每個面都是一個200像素的正方形，并根據方向使用不同的CSS3變換。最后添加鍵盤監聽程序，使我們可以使用鍵盤控制魔方旋轉。

現在，我們已經完成了CSS3魔方的制作，這只是使用CSS3技術制作的眾多精彩動畫之一，相信在今后的網頁設計中，CSS3將大放異彩。