CSS 是一種用于網頁排版的語言，它可以改變文字的顏色、字體、大小和位置，還可以制作圖片的特效、動畫和過渡效果。在這篇文章中，我們將通過 CSS 動畫來展開一個正方體。

.container {
position: relative;
width: 200px;
height: 200px;
margin: 50px auto;
}
.cube {
position: absolute;
width: 100%;
height: 100%;
transform-style: preserve-3d;
transform-origin: center center;
transition: all 1s ease;
}
.face {
position: absolute;
width: 100%;
height: 100%;
opacity: 0.9;
}
.front {
transform: translateZ(100px);
background-color: #ff7675;
}
.back {
transform: translateZ(-100px) rotateY(180deg);
background-color: #74b9ff;
}
.left {
transform: rotateY(-90deg) translateZ(100px);
background-color: #55efc4;
}
.right {
transform: rotateY(90deg) translateZ(100px);
background-color: #a29bfe;
}
.top {
transform: rotateX(90deg) translateZ(100px);
background-color: #ffeaa7;
}
.bottom {
transform: rotateX(-90deg) translateZ(100px);
background-color: #ff6b81;
}
.container:hover .cube {
transform: translateX(-50px) translateY(-50px) translateZ(-100px) rotateX(-180deg) rotateY(-180deg);
}

首先，我們需要一個包含正方體的容器。容器設置為relative，方便定位正方體的各個面。正方體由六個面拼接而成，每個面都是一個div元素，通過改變transform屬性來平移和旋轉。同時，為了實現立體效果，我們需要在容器上設置transform-style: preserve-3d;和transform-origin: center center;屬性。正方體展開動畫的觸發方式是鼠標懸浮在容器上，我們在.container:hover選擇器下設置了一個觸發動畫的樣式。

代碼中提到的translateZ、rotateX、rotateY是 CSS3 中的 3D 變換屬性，translate可以平移元素的位置，rotate可以旋轉元素。