CSS 導航欄 3D 效果是一種十分炫酷的效果，能夠讓你的網站看起來更加時尚、獨特。下面我們來看看如何實現這種效果。

首先，我們需要定義一個基礎樣式，即導航欄的樣式，以及鼠標懸停在導航欄條目上時的樣式：

nav {
background-color: #1C1E26;
display: flex;
justify-content: space-between;
align-items: center;
padding: 20px;
height: 80px;
}
nav ul {
display: flex;
justify-content: center;
align-items: center;
list-style: none;
}
nav li {
margin: 10px;
}
nav a {
color: #fff;
text-decoration: none;
font-size: 20px;
padding: 5px 10px;
transition: all .3s ease-in-out;
}
nav a:hover {
transform: translateY(-5px);
box-shadow: 0px 5px 10px rgba(0, 0, 0, .2);
}

接下來，我們需要定義 3D 效果。我們將在鼠標懸停時向導航欄條目添加以下樣式：

nav a:hover {
transform: rotateX(45deg) translateZ(10px) translateY(-5px);
box-shadow: 0px 5px 10px rgba(0, 0, 0, .2);
}

這里的rotateX定義了旋轉的角度，為 45 度。使用translateZ，我們將條目沿 Z 軸定位了 10px。最后，使用translateY定義條目在 Y 軸的位移。

通過組合這兩種樣式，我們就能夠創建一個光彩奪目的 3D 導航欄效果。如果你希望進一步探究這種方法，可以查看這篇 CodePen 示例。