Rotating Navigation Animation

¿Buscas un efecto llamativo para revelar tu navegación sin recargar tu sitio? El mini-proyecto Rotating Navigation Animation —parte del reto “50 Projects in 50 Days” de Brad Traversy— muestra cómo rotar el lienzo de la página para dejar ver un menú lateral con una transición suave y 100% en vanilla web. Es perfecto para practicar transform, transition y un poco de DOM. 

Qué hace este patrón

Al pulsar el botón de menú, todo el contenedor principal gira unos grados (por ejemplo, −20°) como si abriéramos una puerta, revelando la navegación que está “debajo” a la izquierda. Este enfoque suele implementarse con:

• Un contenedor raíz que envuelve el contenido de la página.

• Un panel de navegación fijo (sidebar) oculto tras el contenedor.

• Una clase show-nav que activa la rotación y desplaza el contenedor.
  Varias implementaciones públicas y demos replican la idea con ligeras variantes. 

Demo mental (y por qué funciona)

• El sidebar está pegado a la izquierda (position: fixed; left: 0;).

• El contenido está dentro de un <div class="container">.

• Al hacer clic en el botón, añadimos/quitemos show-nav en body o .container.

• Con CSS, body.show-nav .container { transform: rotate(-20deg) translateX(…); }

• El origen de transformación (transform-origin: left top;) marca el “bisagra”.

Implementación base

1) HTML

<header class="nav-toggle">
  <button id="menuBtn" aria-expanded="false" aria-controls="site-nav" aria-label="Abrir menú">☰</button>
</header>
<nav id="site-nav" class="sidebar" aria-hidden="true">
  <ul>
    <li><a href="#inicio">Inicio</a></li>
    <li><a href="#blog">Blog</a></li>
    <li><a href="#proyectos">Proyectos</a></li>
    <li><a href="#contacto">Contacto</a></li>
  </ul>
</nav>
<main class="container">
  <h1>Rotating Navigation Animation</h1>
  <p>Un layout sencillo para practicar transformaciones CSS y DOM.</p>
</main>

2) CSS

:root { --radius: 20px; --shadow: 0 10px 30px rgba(0,0,0,.15); }
* { box-sizing: border-box; }
body { margin: 0; background: #111; color: #fff; font: 16px/1.6 system-ui, sans-serif; overflow-x: hidden; }
.nav-toggle { position: fixed; top: 16px; left: 16px; z-index: 3; }
#menuBtn { border: 0; border-radius: 999px; padding: 10px 14px; background: #fff; color: #111; cursor: pointer; }
.sidebar {
  position: fixed; inset: 0 auto 0 0; width: 260px; padding: 80px 24px 24px;
  background: #1b1b1b; z-index: 1; box-shadow: var(--shadow);
}
.sidebar a { color: #e6e6e6; text-decoration: none; display: block; padding: 10px 0; }
.sidebar a:hover { color: #fff; }
.container {
  position: relative; z-index: 2; min-height: 100dvh; padding: 80px 24px;
  background: #181818; border-radius: var(--radius); box-shadow: var(--shadow);
  transform-origin: left top; transition: transform .5s ease, border-radius .5s ease;
}
body.show-nav .container {
  transform: rotate(-18deg) translateX(230px) translateY(40px);
  border-bottom-left-radius: 60px;
}

3) JavaScript

<script>
const btn = document.getElementById('menuBtn');
const nav = document.getElementById('site-nav');
function toggleNav() {
  const open = !document.body.classList.contains('show-nav');
  document.body.classList.toggle('show-nav', open);
  btn.setAttribute('aria-expanded', String(open));
  nav.setAttribute('aria-hidden', String(!open));
}
btn.addEventListener('click', toggleNav);
btn.addEventListener('keydown', (e) => {
  if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); toggleNav(); }
});
</script>

Accesibilidad rápida (A11y)

• Botón con aria-expanded y aria-controls para indicar estado y relación.

• Nav con aria-hidden cuando está cerrado.

• Soporte teclado (Enter/Espacio) en el botón.

• Mantén contraste suficiente entre texto y fondo (evita grises muy claros sobre fondos claros).

Performance y buenas prácticas

• Usa will-change: transform; en .container si la animación se siente tosca.

• Evita animar propiedades que no sean transform y opacity.

• Mantén imágenes optimizadas; en páginas reales, el efecto debe acompañar y no entorpecer la lectura.

Variantes útiles

1. Empuje sin rotación: cambia la rotación por translateX para algo más sobrio.

2. Blur del fondo: cuando el nav está abierto, añade un backdrop-filter: blur(3px) a una capa overlay.

3. Icono animado: rota el ícono “hamburguesa” a “X” con una micro-animación (transiciones en ::before/::after).

Errores comunes (y cómo evitarlos)

• El contenedor rota fuera de la pantalla: ajusta transform-origin y las distancias en translateX/Y.

• Menú inaccesible: recuerda aria-*, foco visible y navegación por teclado.

• Scroll lateral: añade overflow-x: hidden; al body.

Cuándo usarlo (y cuándo no)

Úsalo en landing pages, portafolios o demos donde el “toque” visual sume personalidad. Evítalo en interfaces de alta productividad o paneles de administración con navegación frecuente: un menú clásico puede ser más rápido.

Te dejo un ejemplo de como se vería implementado: