3D Tilt Mobile Navigation

This 3D Tilt Mobile Navigation concept adds a tactile, physical feel to mobile app menus. Unlike standard flat navigations, this component utilizes CSS perspective to “tilt” the entire menu bar towards the user’s touch point, simulating a floating surface. It pairs this effect with delightful SVG icon micro-interactions and a “fly-out” card transition for the content area, creating a highly polished, app-like experience on the web.

Core Technique

The standout feature - the bar tilting - is achieved by dynamically adding specific CSS classes based on the clicked item. The container has a perspective set, and JavaScript calculates which .nav--tiltX class to apply.

Additionally, the SVG animations are granular. Instead of animating the whole SVG, specific paths (path, rect, circle) inside the SVG have unique class names (like .icon2-1). CSS Keyframes transform these individual parts (rotating, scaling, or moving) when the parent link is focused or hovered.

Customization

The styling is built on SCSS, utilizing loops to generate the tilt animations and delays. To change the color scheme, update the HSL variables.

/* SCSS Variables */
$hue: 223; /* Blue */
$hue2: 268; /* Purple */

:root {
  /* Controls the speed of all animations */
  --trans-dur: 0.3s;
  
  /* Custom bounce effect */
  --trans-timing: cubic-bezier(0.7, 0, 0.3, 1);
}

The card animation relies on a JS technique to restart the CSS animation. You can adjust the delay between cards in the SCSS loop:

.card--fly-out {
  /* ... animation rules ... */
  
  @for $i from 1 through 2 {
    &:nth-child(#{$i}) {
      /* Stagger delay: 0.05s per card */
      animation-delay: 0.05s * ($i - 1);
    }
  }
}

Tips

1. Triggering Reflow: In the spawnCards method, you will see void card.offsetWidth;. This is a crucial hack. It forces the browser to recalculate the layout (reflow). Without this line, removing and immediately re-adding the animation class would be optimized away by the browser, and the animation wouldn’t restart.

card.classList.remove(flyOut);
void card.offsetWidth; // Force reflow
card.classList.add(flyOut);

2. Focus-Visible Support: The code includes a @supports block for :focus-visible. This ensures that keyboard users see focus rings (accessibility), while mouse users don’t see persistent outlines after clicking a menu item.