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

/* 創(chuàng)建一個(gè)立方體 */
.cube {
position: relative;
width: 200px;
height: 200px;
transform-style: preserve-3d;
}
/* 添加不同面的背景顏色和3D轉(zhuǎn)換 */
.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);
}

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

現(xiàn)在，我們需要為立方體添加交互效果，使其可以通過用戶鼠標(biāo)或手勢進(jìn)行旋轉(zhuǎn)。我們可以使用CSS的:hover偽類和JavaScript事件來實(shí)現(xiàn)。

/* 添加: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)';
});

在上面的代碼中，我們?yōu)榱⒎襟w添加了:hover偽類，使其在鼠標(biāo)懸停時(shí)旋轉(zhuǎn)。同時(shí)，我們使用JavaScript事件來跟蹤用戶的鼠標(biāo)移動(dòng)，并根據(jù)移動(dòng)的偏移量來旋轉(zhuǎn)立方體。

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