20 CSS Hamburger Menus 20 / 20

3D Rotating Canvas Mobile Hamburger Menu

Advanced showcase — opening the menu pushes the entire page canvas back in 3D with perspective + rotateY() + scale, revealing the navigation sitting behind it.

CSS + JS MIT licensed
Live Demo Open in tab
Open in playground

The code

<div class="chm-20">
  <div class="chm-20__scene">
    <div class="chm-20__behind">
      <div class="chm-20__lbl">// behind the canvas</div>
      <a href="#">Home</a>
      <a href="#">Universe</a>
      <a href="#">Archive</a>
      <a href="#">Contact</a>
    </div>

    <div class="chm-20__perspective">
      <div class="chm-20__canvas">
        <div class="chm-20__inner">
          <h1>Fold the<br><em>whole page.</em></h1>
          <p>3D perspective · rotateY · scale</p>
        </div>
      </div>
    </div>

    <button class="chm-20__burger" aria-label="Toggle 3D menu"><span class="chm-20__b"><i></i><i></i><i></i></span></button>
    <div class="chm-20__tag">3D_CANVAS // 2030</div>
  </div>
</div>
@import url('https://fonts.googleapis.com/css2?family=Syne:wght@500;700;800&family=JetBrains+Mono:wght@400;500&display=swap');
.chm-20, .chm-20 *, .chm-20 *::before, .chm-20 *::after { box-sizing: border-box; margin: 0; padding: 0; }
.chm-20{
  --bg:#06070d;--canvas:#10131f;--cyan:#39e6ff;--magenta:#ff48b0;--gold:#ffd84d;--fog:#eef1fb;
  min-height:460px;display:grid;place-items:stretch;
  font-family:'Syne',sans-serif;background:var(--bg);color:var(--fog);
  position:relative;
}
.chm-20__scene{position:relative;width:100%;min-height:460px;height:100%;overflow:hidden}
.chm-20__perspective{position:absolute;inset:0;perspective:1600px;perspective-origin:50% 50%}
.chm-20__behind{position:absolute;inset:0;z-index:1;display:flex;flex-direction:column;justify-content:center;padding:0 12%;
  background:radial-gradient(60% 60% at 30% 40%,rgba(57,230,255,.18),transparent 60%),radial-gradient(50% 50% at 80% 70%,rgba(255,72,176,.16),transparent 60%),#0a0c16}
.chm-20__lbl{font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.4em;text-transform:uppercase;color:var(--cyan);margin-bottom:22px;opacity:0;transition:.4s .5s}
.chm-20.is-open .chm-20__lbl{opacity:1}
.chm-20__behind a{font-size:clamp(1.6rem,5vw,3rem);font-weight:800;color:var(--fog);text-decoration:none;line-height:1.15;letter-spacing:-.02em;transition:color .3s,transform .3s;opacity:0;transform:translateX(-30px)}
.chm-20.is-open .chm-20__behind a{opacity:1;transform:none}
.chm-20.is-open .chm-20__behind a:nth-child(2){transition:.5s .55s}
.chm-20.is-open .chm-20__behind a:nth-child(3){transition:.5s .63s}
.chm-20.is-open .chm-20__behind a:nth-child(4){transition:.5s .71s}
.chm-20.is-open .chm-20__behind a:nth-child(5){transition:.5s .79s}
.chm-20__behind a:hover{color:var(--magenta)}
.chm-20__canvas{position:absolute;inset:0;z-index:10;background:var(--canvas);transform-origin:right center;
  transition:transform .9s cubic-bezier(.76,0,.24,1),border-radius .9s,box-shadow .9s;
  background-image:radial-gradient(50% 40% at 50% 0%,rgba(255,216,77,.12),transparent 60%)}
.chm-20.is-open .chm-20__canvas{transform:translateX(-58%) scale(.74) rotateY(38deg);border-radius:30px;box-shadow:-40px 40px 100px rgba(0,0,0,.6)}
.chm-20__inner{height:100%;display:flex;flex-direction:column;justify-content:center;padding:0 9%}
.chm-20__inner h1{font-size:clamp(2rem,7vw,4.4rem);font-weight:800;line-height:.9;letter-spacing:-.03em}
.chm-20__inner h1 em{font-style:normal;background:linear-gradient(100deg,var(--cyan),var(--magenta));-webkit-background-clip:text;background-clip:text;color:transparent}
.chm-20__inner p{font-family:'JetBrains Mono',monospace;margin-top:16px;font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:rgba(238,241,251,.55)}
.chm-20__burger{position:absolute;top:22px;right:22px;z-index:40;width:54px;height:54px;border-radius:16px;cursor:pointer;border:none;display:grid;place-items:center;
  background:rgba(238,241,251,.07);border:1px solid rgba(238,241,251,.16);backdrop-filter:blur(12px);transition:transform .5s}
.chm-20__burger:hover{transform:scale(1.06)}
.chm-20__b{width:22px;height:14px;position:relative;display:inline-block}
.chm-20__b i{position:absolute;left:0;height:2.6px;width:100%;background:var(--fog);border-radius:3px;transition:transform .5s cubic-bezier(.7,0,.2,1),opacity .3s,background .4s}
.chm-20__b i:nth-child(1){top:0}.chm-20__b i:nth-child(2){top:6px}.chm-20__b i:nth-child(3){top:12px}
.chm-20.is-open .chm-20__b i:nth-child(1){transform:translateY(6px) rotate(45deg);background:var(--cyan)}
.chm-20.is-open .chm-20__b i:nth-child(2){opacity:0}
.chm-20.is-open .chm-20__b i:nth-child(3){transform:translateY(-6px) rotate(-45deg);background:var(--cyan)}
.chm-20__tag{position:absolute;bottom:20px;left:24px;z-index:40;font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.3em;color:rgba(238,241,251,.45)}

@media (prefers-reduced-motion: reduce){
  .chm-20__canvas,.chm-20__behind a,.chm-20__lbl,.chm-20__b i,.chm-20__burger{transition:none !important}
}
(() => {
  const root = document.querySelector('.chm-20');
  if (!root) return;
  const btn = root.querySelector('.chm-20__burger');
  btn.addEventListener('click', () => root.classList.toggle('is-open'));
})();

More from 20 CSS Hamburger Menus

Hamburger Menu with Morphing Icon AnimationsFull-Screen Overlay Mobile NavigationSlide-out Sidebar / Off-Canvas NavigationResponsive Navbar with Mobile-Only Hamburger ToggleMinimalist / Floating Hamburger ButtonTailwind CSS Hamburger MenuAccessible Hamburger Menu (WCAG Compliant)Full Screen Blur Overlay Hamburger MenuMobile Bottom Nav Bar with Floating HamburgerMulti-Level Dropdown Hamburger Menu (Nested Accordion)Flexbox Navbar with Right-Aligned Hamburger IconCircular Expand / Radial Ripple Mobile Menu
View the full collection →

Search CodeFronts

Loading…

↑↓ navigate ↵ select esc close Open full search page →