CSS是一種強(qiáng)大的設(shè)計(jì)語言，可以通過它來創(chuàng)建精美的三維模型。在本教程中，我們將通過以下步驟來創(chuàng)建一個(gè)簡(jiǎn)單的三維模型：

.cube {
position: relative;
width: 100px;
height: 100px;
transform-style: preserve-3d;
transform: rotateX(45deg) rotateY(45deg);
}
.cube::before,
.cube::after {
content: "";
position: absolute;
width: 100%;
height: 100%;
background: red;
}
.cube::before {
transform: translateZ(-50px);
}
.cube::after {
transform: rotateY(90deg) translateZ(-50px);
}

首先，我們需要定義一個(gè)容器，并將其置于3D模式下。使用CSS transform屬性的rotateX和rotateY值，我們可以將該容器旋轉(zhuǎn)45度。

接下來，我們定義了兩個(gè)偽元素（before和after），它們代表了兩個(gè)立方體面。這些面使用絕對(duì)定位和100%的寬度和高度來覆蓋容器，并使用紅色的背景顏色進(jìn)行填充。

然后，我們使用transform: translateZ屬性將.before元素向后移動(dòng)50px。這樣可以將元素放在容器的背面。

最后，我們使用transform: rotateY(90deg) translateZ(-50px)將.after元素旋轉(zhuǎn)90度，并讓其向后移動(dòng)50px，這樣它就會(huì)垂直地放在容器的右側(cè)。

現(xiàn)在，我們已經(jīng)創(chuàng)建了一個(gè)簡(jiǎn)單的三維模型。您可以通過更改旋轉(zhuǎn)和平移值來探索各種三維形狀的可能性。