CSS 可以通過 transform 屬性實現各種 3D 效果，例如實現一個立方體。

首先，我們需要創建一個正方形，將其旋轉 45 度，并使用 perspective 屬性定義一個視角：

.square {
width: 100px;
height: 100px;
background-color: #eee;
transform: rotate(45deg);
perspective: 500px;
margin: 50px auto;
}

接下來，我們需要創建 5 個面，用 css 旋轉將其翻折到對應的位置上：

.front {
position: absolute;
width: 100px;
height: 100px;
background-color: #1abc9c;
transform: translateZ(50px);
}
.back {
position: absolute;
width: 100px;
height: 100px;
background-color: #9b59b6;
transform: translateZ(-50px) rotateY(180deg);
}
.right {
position: absolute;
width: 100px;
height: 100px;
background-color: #f1c40f;
transform: rotateY(90deg) translateZ(50px);
}
.left {
position: absolute;
width: 100px;
height: 100px;
background-color: #e74c3c;
transform: rotateY(-90deg) translateZ(50px);
}
.top {
position: absolute;
width: 100px;
height: 100px;
background-color: #2980b9;
transform: rotateX(90deg) translateZ(50px);
}

最后，我們將這五個面添加到正方形中：

完成了以上步驟后，我們就可以看到一個很酷的立方體效果了。通過 transform 屬性的旋轉和位移操作，讓這五個面組合起來形成了一個立方體。