CSS3D數軸是一種可以將三維立體空間轉換成二維頁面的技術，使用CSS3的transform屬性和translateZ函數來創建。它可以用來呈現各種數據和信息，使得展示出來的內容更加生動有趣。下面我們來學習一下如何使用CSS3D數軸。

/* HTML結構 */
1
2
3
4
5
6
/* CSS3 */
.container {
position: relative;
perspective: 1000px; /* 定義一個透視距離值 */
}
?
.slider {
width: 400px;
height: 200px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%) rotateY(0deg); /* 將平面視角改成軌跡視角 */
transform-style: preserve-3d; /* 保持軌跡視角 */
transition: transform .5s; /* 添加過度效果 */
}
?
.item {
position: absolute;
width: 100px;
height: 100px;
line-height: 100px;
font-size: 30px;
text-align: center;
background-color: #ccc;
}
?
.item:nth-child(odd) {
transform: rotateY(45deg) translateZ(100px); /* 沿Y軸旋轉45度，Z軸移動100px */
}
?
.item:nth-child(even) {
transform: rotateY(45deg) translateZ(-100px); /* 沿Y軸旋轉45度，Z軸移動-100px */
}
?
.slider:hover { /* 鼠標經過時，切換軌跡 */
transform: translate(-50%, -50%) rotateY(180deg);
}

在上面的代碼中，我們使用了一個ul元素來包含列表項，每個li元素代表一個數字。接著，我們用CSS3的transform屬性和translateZ函數來定義每個li元素位于空間中的位置，然后設定透視距離perspective，使瀏覽器可以根據每個元素的位置將它們轉換成二維展示。

除此之外，我們還用了transform-style屬性來定義軌跡視角，使每個元素的位置關系都得以保留。還使用了transition屬性來添加過度效果，讓動畫更加順滑。

最后，在鼠標經過時我們用:hover來切換軌跡，從而讓每個元素的位置關系發生變化，呈現出更加生動的效果。