Componente Menu Hamburger 3D

<div class="flex items-center justify-center p-4 bg-gradient-to-br from-stone-100 to-stone-200 dark:from-stone-800 dark:to-stone-900 min-h-screen">
  <div class="relative flex flex-col items-end gap-2 p-4 rounded-xl shadow-xl bg-stone-50 dark:bg-stone-700 transition-all duration-300 transform perspective-1000 group">
    <!-- Accessible Checkbox for toggling the menu -->
    <input type="checkbox" id="menu-toggle" class="peer sr-only group-hover:block">

    <!-- Hamburger Icon -->
    <label for="menu-toggle" class="relative z-20 w-8 h-6 flex flex-col justify-between cursor-pointer transition-transform duration-300 ease-in-out group-hover:scale-110 group-hover:rotate-6 perspective-1000">
      <span class="block w-full h-1 bg-stone-700 dark:bg-stone-300 rounded-full transition-all duration-300 ease-out origin-left peer-checked:rotate-45 peer-checked:translate-y-2.5 peer-checked:w-7 shadow-sm dark:shadow-stone-900/50"></span>
      <span class="block w-full h-1 bg-stone-700 dark:bg-stone-300 rounded-full transition-all duration-300 ease-out peer-checked:opacity-0 shadow-sm dark:shadow-stone-900/50"></span>
      <span class="block w-full h-1 bg-stone-700 dark:bg-stone-300 rounded-full transition-all duration-300 ease-out origin-left peer-checked:-rotate-45 peer-checked:-translate-y-2.5 peer-checked:w-7 shadow-sm dark:shadow-stone-900/50"></span>
    </label>

    <!-- Menu Items Container -->
    <nav class="absolute top-0 right-0 w-64 md:w-72 lg:w-80 h-full p-4 pt-16 bg-gradient-to-br from-stone-200 to-stone-300 dark:from-stone-700 dark:to-stone-800 rounded-xl shadow-2xl origin-right transition-transform duration-500 ease-in-out transform scale-x-0 peer-checked:scale-x-100 peer-checked:translate-x-0 rotate-y-0 peer-checked:rotate-y-5 flex flex-col gap-3 opacity-0 peer-checked:opacity-100 pointer-events-none peer-checked:pointer-events-auto hover:z-30 group-focus-within:scale-x-100 group-focus-within:translate-x-0 group-focus-within:opacity-100 group-focus-within:pointer-events-auto">
      <ul class="flex flex-col gap-y-3">
        <li>
          <a href="#" class="block px-4 py-2 text-stone-800 dark:text-stone-100 hover:text-amber-700 dark:hover:text-amber-300 text-lg md:text-xl font-semibold rounded-lg transition-all duration-200 transform hover:translate-x-2 bg-stone-100/50 dark:bg-stone-600/50 hover:shadow-lg dark:hover:shadow-stone-950/70 hover:relative hover:z-10 group-hover:hover:shadow-2xl">
            Home
          </a>
        </li>
        <li>
          <a href="#" class="block px-4 py-2 text-stone-800 dark:text-stone-100 hover:text-amber-700 dark:hover:text-amber-300 text-lg md:text-xl font-semibold rounded-lg transition-all duration-200 transform hover:translate-x-2 bg-stone-100/50 dark:bg-stone-600/50 hover:shadow-lg dark:hover:shadow-stone-950/70 hover:relative hover:z-10 group-hover:hover:shadow-2xl">
            Movies
          </a>
        </li>
        <li>
          <a href="#" class="block px-4 py-2 text-stone-800 dark:text-stone-100 hover:text-amber-700 dark:hover:text-amber-300 text-lg md:text-xl font-semibold rounded-lg transition-all duration-200 transform hover:translate-x-2 bg-stone-100/50 dark:bg-stone-600/50 hover:shadow-lg dark:hover:shadow-stone-950/70 hover:relative hover:z-10 group-hover:hover:shadow-2xl">
            TV Shows
          </a>
        </li>
        <li>
          <a href="#" class="block px-4 py-2 text-stone-800 dark:text-stone-100 hover:text-amber-700 dark:hover:text-amber-300 text-lg md:text-xl font-semibold rounded-lg transition-all duration-200 transform hover:translate-x-2 bg-stone-100/50 dark:bg-stone-600/50 hover:shadow-lg dark:hover:shadow-stone-950/70 hover:relative hover:z-10 group-hover:hover:shadow-2xl">
            Categories
          </a>
        </li>
        <li>
          <a href="#" class="block px-4 py-2 text-stone-800 dark:text-stone-100 hover:text-amber-700 dark:hover:text-amber-300 text-lg md:text-xl font-semibold rounded-lg transition-all duration-200 transform hover:translate-x-2 bg-stone-100/50 dark:bg-stone-600/50 hover:shadow-lg dark:hover:shadow-stone-950/70 hover:relative hover:z-10 group-hover:hover:shadow-2xl">
            My List
          </a>
        </li>
        <li>
          <a href="#" class="block px-4 py-2 text-stone-800 dark:text-stone-100 hover:text-amber-700 dark:hover:text-amber-300 text-lg md:text-xl font-semibold rounded-lg transition-all duration-200 transform hover:translate-x-2 bg-stone-100/50 dark:bg-stone-600/50 hover:shadow-lg dark:hover:shadow-stone-950/70 hover:relative hover:z-10 group-hover:hover:shadow-2xl">
            Settings
          </a>
        </li>
      </ul>
    </nav>
  </div>
</div>

<style>
  /* CSS for 3D perspective and transformations */
  .perspective-1000 {
    perspective: 1000px;
  }

  .rotate-y-0 {
    transform: rotateY(0deg);
  }

  .peer-checked\:rotate-y-5 {
    transform: rotateY(-5deg);
  }

  /* Add a subtle 3D tilt on hover for the entire component for more depth */
  .group:hover {
    transform: rotateX(2deg) rotateY(2deg);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
  }

  .dark .group:hover {
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.5);
  }

  /* Ensure no scrollbar appears if perspective causes slight overflow */
  body { overflow-x: hidden; }
</style>