A navigation menu with 3D transform effects that creates depth and visual interest. Menu items tilt and transform on hover for an engaging user experience.
<nav class="nav-3d">
<a href="#" class="nav-3d-item">Home</a>
<a href="#" class="nav-3d-item">About</a>
<a href="#" class="nav-3d-item">Services</a>
<a href="#" class="nav-3d-item">Contact</a>
</nav>.nav-3d {
display: flex;
gap: 10px;
perspective: 1000px;
}
.nav-3d-item {
padding: 15px 30px;
background: linear-gradient(135deg, #667eea, #764ba2);
color: white;
text-decoration: none;
font-weight: 700;
border-radius: 8px;
transform-style: preserve-3d;
transition: all 0.3s ease;
position: relative;
}
.nav-3d-item::before {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(135deg, #764ba2, #667eea);
border-radius: 8px;
transform: translateZ(-20px);
opacity: 0;
transition: opacity 0.3s ease;
}
.nav-3d-item:hover {
transform: translateZ(20px) rotateX(10deg);
}
.nav-3d-item:hover::before {
opacity: 1;
}