CSS3是一種強大的CSS語言的版本，許多瀏覽器支持了CSS3功能。其中，CSS3的3D旋轉功能還是非常實用的，配合導航條的實現效果特別好。接下來我們來實現一下3D旋轉效果的導航條。

HTML代碼：
<ul class="menu">
<li><a href="#">Home</a></li>
<li><a href="#">Products</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Contact Us</a></li>
</ul>
CSS代碼：
.menu {
margin: 0;
padding: 0;
list-style: none;
width: 800px;
height: 50px;
position: relative;
display: flex;
align-items: center;
justify-content: center;
perspective: 800px;
}
.menu li {
margin: 0;
padding: 0;
position: relative;
display: inline-block;
width: 150px;
height: 50px;
transform-style: preserve-3d;
transform-origin: center center -90px;
transition: transform .5s;
cursor: pointer;
}
.menu li:nth-child(1) {
transform: rotateY(0deg);
}
.menu li:nth-child(2) {
transform: rotateY(90deg);
}
.menu li:nth-child(3) {
transform: rotateY(180deg);
}
.menu li:nth-child(4) {
transform: rotateY(270deg);
}
.menu li a {
display: block;
position: absolute;
width: 100%;
height: 100%;
color: #fff;
background-color: #428bca;
text-align: center;
line-height: 50px;
text-decoration: none;
}
.menu li:hover {
transform: rotateY(180deg);
}
.menu li:hover a {
background-color: #31708f;
}

代碼解釋： 以上代碼中，我們首先定義了一個ul，并為其添加了一個menu的class。然后給menu的樣式中添加了perspective:800px，表示在XYZ平面上以800px的距離觀察元素，讓元素呈現3D效果。接著我們給導航條的每個li元素都定義一個transform-style:preserve-3d，表示讓3D旋轉效果保留在li中，創建獨立的3D渲染區域。接著我們定義每個li元素的transform-origin:center center -90px，這代表每個li元素所在的3D空間。再設置li的寬度、高度和樣式，使元素排列好。最后用transform變形函數和過渡效果transform .5s控制旋轉的速度和角度。

以上代碼實現了一個3D旋轉效果的導航，當鼠標懸停在元素上時，元素變成可點擊的狀態，背景色調整為另一個顏色。