HTML5 3D導航欄源代碼 在Web開發中，導航欄是一個必不可少的組件。其中，3D導航欄可以給網頁帶來更加動感和現代感。下面是一份HTML5 3D導航欄的源代碼示例。 首先，讓我們看一下HTML部分的代碼：

<nav class="nav-3d">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About Us</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Portfolio</a></li>
<li><a href="#">Blog</a></li>
<li><a href="#">Contact Us</a></li>
</ul>
</nav>

在這段代碼中，我們首先使用了一個nav標簽來表示導航欄。我們也可以使用div標簽來實現同樣的效果。在nav標簽內，我們使用了一個ul標簽來表示導航欄中的鏈接列表，每個鏈接都用一個li標簽進行包裹。同時，每個li標簽中還有一個a標簽來表示鏈接的目標地址。 接下來，看一下CSS部分的代碼：

.nav-3d ul {
perspective: 800px;
transform-style: preserve-3d;
}
.nav-3d ul li {
position: relative;
display: inline-block;
margin: 0 10px;
padding: 5px 10px;
background-color: #333;
border-radius: 5px;
box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
transform-style: preserve-3d;
transition: all 0.3s ease-out;
}
.nav-3d ul li a {
display: block;
position: relative;
color: #fff;
}
.nav-3d ul li:before {
content: '';
position: absolute;
top: 100%;
left: 0;
width: 100%;
height: 0;
background-color: #eee;
border-radius: 5px;
box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
transform-origin: bottom center;
transform: rotateX(90deg);
transition: all 0.3s ease-out;
}
.nav-3d ul li:hover {
transform: translateY(-10px) rotateX(-15deg);
box-shadow: 0 15px 20px rgba(0, 0, 0, 0.4);
}
.nav-3d ul li:hover:before {
height: 100%;
transform: rotateX(0deg);
}

在CSS代碼中，我們首先給導航欄的ul元素應用了perspective屬性，這個屬性可以使導航欄具有3D效果。接下來，我們為每個li元素都設定了一系列樣式，包括position、display、margin、padding、background-color、border-radius等，這些樣式可以讓導航欄看起來更加美觀。同時，我們也將每個li元素的transform-style屬性設定為preserve-3d，這也能保證導航欄的3D效果。在鼠標懸停時，每個li元素的transform屬性和box-shadow屬性都會發生變化，讓導航欄看起來更加生動和醒目。最后，我們添加了一個:before偽元素，用來表示每個li元素底部的3D效果。在鼠標懸停時，這個偽元素的一些CSS屬性也會被修改，達到了一個更好的特效。 通過以上代碼示例，我們可以看到HTML5 3D導航欄的實現原理和方法，讓我們的Web頁面看起來更加現代和時尚。