CSS3是一種強大的樣式語言，可以用來創建各種特殊效果，包括3D立方體。下面我們將介紹如何使用CSS3制作一個漂亮的3D立方體。

/* 創建一個立方體 */
.cube {
position: relative;
width: 200px;
height: 200px;
transform-style: preserve-3d;
}
/* 添加不同面的背景顏色和3D轉換 */
.cube .front {
position: absolute;
width: 200px;
height: 200px;
background-color: #f00;
transform: translateZ(100px);
}
.cube .back {
position: absolute;
width: 200px;
height: 200px;
background-color: #0f0;
transform: rotateY(180deg) translateZ(100px);
}
.cube .right {
position: absolute;
width: 200px;
height: 200px;
background-color: #00f;
transform: rotateY(90deg) translateZ(100px);
}
.cube .left {
position: absolute;
width: 200px;
height: 200px;
background-color: #ff0;
transform: rotateY(-90deg) translateZ(100px);
}
.cube .top {
position: absolute;
width: 200px;
height: 200px;
background-color: #f0f;
transform: rotateX(90deg) translateZ(100px);
}
.cube .bottom {
position: absolute;
width: 200px;
height: 200px;
background-color: #0ff;
transform: rotateX(-90deg) translateZ(100px);
}

在上面的代碼中，我們創建了一個6面的立方體，并使用了不同的背景顏色和3D變換。我們給每個面添加了一個class來方便修改樣式。

現在，我們需要為立方體添加交互效果，使其可以通過用戶鼠標或手勢進行旋轉。我們可以使用CSS的:hover偽類和JavaScript事件來實現。

/* 添加:hover偽類 */
.cube:hover {
transform: rotateX(30deg) rotateY(30deg);
}
/* 添加JavaScript事件 */
var cube = document.querySelector('.cube');
document.addEventListener('mousemove', function(e) {
var x = -(window.innerWidth / 2 - e.clientX) / 10;
var y = (window.innerHeight / 2 - e.clientY) / 10;
cube.style.transform = 'rotateX(' + y + 'deg) rotateY(' + x + 'deg)';
});

在上面的代碼中，我們為立方體添加了:hover偽類，使其在鼠標懸停時旋轉。同時，我們使用JavaScript事件來跟蹤用戶的鼠標移動，并根據移動的偏移量來旋轉立方體。

現在，你已經掌握了如何使用CSS3制作一個漂亮的3D立方體，并為其添加交互效果。去試一試吧！