CSS可以利用Transform和Transition屬性制作出各種動畫效果，其中之一就是制作正方體。下面我們通過簡單的代碼講解如何利用CSS制作正方體。

/* 創建一個div容器 */
div{
width: 200px;
height: 200px;
position: relative;
transform-style: preserve-3d; /* 坐標系為三維 */
}
/* 創建6個面，其中每個面的旋轉角度都是45度 */
.front{
width: 200px;
height: 200px;
position: absolute;
background-color: #ff0000;
transform: rotateY(0deg) translateZ(100px);
}
.back{
width: 200px;
height: 200px;
position: absolute;
background-color: #00ff00;
transform: rotateY(180deg) translateZ(100px);
}
.left{
width: 200px;
height: 200px;
position: absolute;
background-color: #0000ff;
transform: rotateY(-90deg) translateZ(100px);
}
.right{
width: 200px;
height: 200px;
position: absolute;
background-color: #ffff00;
transform: rotateY(90deg) translateZ(100px);
}
.top{
width: 200px;
height: 200px;
position: absolute;
background-color: #ff00ff;
transform: rotateX(90deg) translateZ(100px);
}
.bottom{
width: 200px;
height: 200px;
position: absolute;
background-color: #00ffff;
transform: rotateX(-90deg) translateZ(100px);
}

在代碼中我們創建了一個div容器，在容器里面創建了六個面，分別為前面、后面、左面、右面、頂面和底面。每個面的寬高均為200px，每個面按45度旋轉，這樣就可以形成正方體的六個面。在每個面的CSS中，我們使用了Transform屬性和3D變換函數。其中，旋轉角度的單位為度，translateZ函數定義了每個面到中心點的距離，這樣每個面就可以拼成正方體。

通過以上代碼，便可以簡單地制作出一個正方體，并且利用Transform屬性可以進行旋轉等動態效果，進一步豐富頁面設計。