CSS中的三維坐標(biāo)系統(tǒng)可以使我們創(chuàng)建出更具空間感的效果。在二維坐標(biāo)系統(tǒng)中，我們只能控制元素在平面上的位置，而在三維坐標(biāo)系統(tǒng)中，我們可以控制元素在空間中的位置。CSS中的三維坐標(biāo)系由X軸、Y軸和Z軸組成，其中X軸是水平方向的，Y軸是垂直方向的，Z軸則是指向我們的方向。通過控制這三個(gè)軸上的數(shù)值，我們可以改變元素在空間中的位置和旋轉(zhuǎn)角度。

/* 三維坐標(biāo) */
.box {
position: relative;
transform-style: preserve-3d; /* 保持坐標(biāo)系 */
transform: translateZ(-50px); /* 沿著Z軸向內(nèi)移動(dòng)50px */
}
/* 旋轉(zhuǎn) */
.box:hover {
transform: rotateY(45deg); /* 沿著Y軸順時(shí)針旋轉(zhuǎn)45度 */
}

上面的例子中，我們首先將元素的transform-style屬性設(shè)置為preserve-3d，這樣我們才能在其上設(shè)置三維變換。然后，我們通過transform屬性將元素沿著Z軸向內(nèi)移動(dòng)了50像素。最后，我們在:hover選擇器中設(shè)置了旋轉(zhuǎn)效果，它會(huì)使元素繞著Y軸順時(shí)針旋轉(zhuǎn)45度。

除了上述變換，還有很多可以在三維空間中使用的變換。例如，我們可以使用translateX、translateY和translateZ屬性分別控制元素在X、Y和Z軸上的移動(dòng)；使用scaleX、scaleY和scaleZ屬性可以對元素進(jìn)行縮放；使用rotateX、rotateY和rotateZ屬性可以分別控制元素圍繞X、Y和Z軸旋轉(zhuǎn)；以及使用perspective屬性可以改變視角，使得元素看起來更具深度感。

/* 縮放 */
.box {
transform: scale3d(2, 0.5, 1); /* 在X軸方向縮放2倍，在Y軸方向縮放0.5倍 */
}
/* 透視 */
.container {
perspective: 1000px; /* 將視角設(shè)為1000像素 */
}
.box {
transform: rotateY(45deg);
}

上述兩個(gè)例子分別演示了縮放和透視效果。在縮放效果中，我們使用了scale3d屬性，它可以同時(shí)控制三個(gè)軸上的縮放比例。在透視效果中，我們將視角設(shè)為1000像素，這樣在對.box元素進(jìn)行Y軸旋轉(zhuǎn)時(shí)，它就會(huì)看起來更具深度感。