css3制作3d导航条

使用CSS3制作3D导航条

基础HTML结构

创建一个简单的导航列表结构，包含链接项：

<nav class="nav-3d">
  <ul>
    <li><a href="#">首页</a></li>
    <li><a href="#">产品</a></li>
    <li><a href="#">服务</a></li>
    <li><a href="#">关于</a></li>
    <li><a href="#">联系</a></li>
  </ul>
</nav>

核心CSS样式

通过transform和transition实现3D效果：

.nav-3d ul {
  display: flex;
  list-style: none;
  perspective: 1000px; /* 3D透视距离 */
}

.nav-3d li {
  margin: 0 10px;
  transform-style: preserve-3d; /* 保持3D空间 */
}

.nav-3d a {
  display: block;
  padding: 12px 24px;
  color: white;
  background: #3498db;
  text-decoration: none;
  transform: rotateX(20deg); /* 初始X轴旋转 */
  transition: transform 0.3s, background 0.3s;
}

.nav-3d a:hover {
  background: #2980b9;
  transform: rotateX(0deg) translateZ(20px); /* 悬停时抬起效果 */
  box-shadow: 0 5px 15px rgba(0,0,0,0.3);
}

增强3D效果

添加深度感和阴影：

.nav-3d li {
  position: relative;
}

.nav-3d li::after {
  content: '';
  position: absolute;
  bottom: -8px;
  left: 0;
  width: 100%;
  height: 8px;
  background: #1a5276;
  transform: rotateX(-90deg);
  transform-origin: top;
  opacity: 0.7;
}

响应式调整

适应不同屏幕尺寸：

@media (max-width: 768px) {
  .nav-3d ul {
    flex-direction: column;
    perspective: none;
  }

  .nav-3d li {
    margin: 5px 0;
  }

  .nav-3d a {
    transform: rotateX(0deg);
  }
}

进阶效果（可选）

添加倾斜和Z轴位移：

.nav-3d li:nth-child(odd) a {
  transform: rotateX(20deg) rotateY(5deg);
}

.nav-3d li:nth-child(even) a {
  transform: rotateX(20deg) rotateY(-5deg);
}

.nav-3d li:hover a {
  transform: rotateX(0deg) rotateY(0deg) translateZ(25px);
}