#CSS特效

======================================================

1. 核心实现步骤

• 创建导航容器：设置透视效果和3D空间

• 添加导航项：每个导航项包含图标和文字

• 设置3D变换：使用rotateX和translateZ属性

• 添加悬停效果：通过过渡动画实现立体效果

======================================================

2. HTML结构

<nav class="nav-3d">
  <ul>
    <li class="nav-item">
      <div class="nav-icon">🏠</div>
      <span class="nav-text">首页</span>
    </li>
    <li class="nav-item">
      <div class="nav-icon">📋</div>
      <span class="nav-text">产品</span>
    </li>
    <li class="nav-item">
      <div class="nav-icon">📞</div>
      <span class="nav-text">联系</span>
    </li>
  </ul>
</nav>

======================================================

3. CSS样式

/* 3D导航容器 */
.nav-3d {
  perspective: 1000px;
  margin: 50px;
}

/* 导航列表 */
.nav-3d ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  gap: 20px;
}

/* 导航项 */
.nav-item {
  width: 100px;
  height: 100px;
  background-color: #f0f0f0;
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.3s ease;
  transform-style: preserve-3d;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

/* 导航图标 */
.nav-icon {
  font-size: 30px;
  margin-bottom: 10px;
  transition: transform 0.3s ease;
}

/* 导航文字 */
.nav-text {
  font-size: 14px;
  color: #333;
  transition: transform 0.3s ease;
}

/* 悬停效果 */
.nav-item:hover {
  transform: rotateX(10deg) translateZ(20px);
  background-color: #e0e0e0;
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
}

.nav-item:hover .nav-icon {
  transform: scale(1.2);
}

.nav-item:hover .nav-text {
  transform: translateY(5px);
}

======================================================

4. 实现原理

• 透视效果：perspective属性创建3D视觉空间

• 3D变换：transform-style: preserve-3d确保子元素在3D空间中渲染

• 立体效果：通过rotateX和translateZ属性实现导航项的立体变换

• 过渡动画：transition属性使悬停效果平滑过渡

• 阴影效果：box-shadow增强3D导航的立体感

======================================================

5. 扩展应用

• 添加更多导航项：根据需要扩展导航菜单

• 自定义图标：使用SVG图标或字体图标

• 调整3D参数：修改rotate角度和translateZ值调整效果

• 添加背景渐变：增强视觉吸引力

======================================================