CSS是前端開發中不可或缺的技術，通過CSS可以實現豐富的頁面樣式，其中立體容器也是一個比較常見的效果，在這里我們來一起學習一下CSS如何實現立體容器。

.container {
width: 200px;
height: 200px;
background-color: #fff;
border: 2px solid #ccc;
box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
position: relative;
perspective: 1000px; // 設置視距
}
.box {
width: 100%;
height: 100%;
position: absolute;
transition: transform 0.5s ease;
transform-style: preserve-3d;
}
.front,
.back {
position: absolute;
width: 200px;
height: 200px;
background-color: #fff;
}
.front {
transform: rotateY(0deg) translateZ(100px);
}
.back {
transform: rotateY(180deg) translateZ(100px);
}
.hover .box {
transform: rotateY(180deg);
}

首先，我們需要創建一個容器`.container`，這個容器的寬度、高度、背景顏色、邊框都可以根據設計需求進行設置，同時我們還需要給這個容器添加一個`perspective`屬性，來設置視距，這個屬性用于創建一個三維空間，讓后代元素能夠在這個空間中展示出立體效果。

然后，我們需要在這個容器中創建一個子元素`.box`，這個子元素使用絕對定位進行定位，同時需要設置`transform-style: preserve-3d`來保證它能夠在三維空間中變換。這個子元素分為兩個面，分別是`.front`和`.back`，我們分別為它們設置寬度、高度、背景顏色，并且使用`transform`屬性分別將它們沿著Y軸旋轉`0deg`和`180deg`，同時還需要給它們添加`translateZ`屬性，將它們移動到容器內部，這個屬性的值需要根據容器的寬度、高度以及設計需求進行調整。

最后，我們還需要為這個容器設置一個鼠標懸停時的效果，當鼠標懸停在這個容器上時，我們需要將子元素`.box`沿著Y軸旋轉180度，這可以通過為容器添加一個`.hover`類來實現，同時設置`.hover .box`的`transform`屬性即可。