CSS3是一門強大的樣式語言，它能夠幫助我們實現各種復雜的效果，其中之一就是利用CSS3畫一個立方體。下面我們來看看具體的實現過程。

/*設置立方體容器*/
.box{
width: 300px;
height: 300px;
perspective: 800px;
perspective-origin:50% 50%;
}
/*設置立方體六面*/
.front, .back, .left, .right, .top, .bottom{
position: absolute;
width: 300px;
height: 300px;
opacity: 0.7;
}
/*設置立方體各個面的位置、顏色和旋轉*/
.front{
background-color: #f00;
transform: rotateY(0deg) translateZ(150px);
}
.back{
background-color: #0f0;
transform: rotateY(180deg) translateZ(150px);
}
.left{
background-color: #00f;
transform: rotateY(-90deg) translateZ(150px);
}
.right{
background-color: #ff0;
transform: rotateY(90deg) translateZ(150px);
}
.top{
background-color: #f0f;
transform: rotateX(90deg) translateZ(150px);
}
.bottom{
background-color: #0ff;
transform: rotateX(-90deg) translateZ(150px);
}
/*設置鼠標懸停時立方體的旋轉*/
.box:hover .front{
transform: rotateY(90deg) translateZ(150px);
}
.box:hover .back{
transform: rotateY(270deg) translateZ(150px);
}
.box:hover .left{
transform: rotateY(180deg) translateZ(150px);
}
.box:hover .right{
transform: rotateY(0deg) translateZ(150px);
}
.box:hover .top{
transform: rotateX(270deg) translateZ(150px);
}
.box:hover .bottom{
transform: rotateX(90deg) translateZ(150px);
}

以上就是畫一個立方體的具體實現，通過一些簡單的CSS3屬性，我們能夠輕松實現一個美觀的立方體效果。