Game Menu

This pattern shows how to create a mouse and keyboard accessible 3D game menu.

Full article · Video on YouTube · Source on Github

HTML

<ul class="threeD-button-set">
  <li><button>New Game</button></li>
  <li><button>Continue</button></li>
  <li><button>Online</button></li>
  <li><button>Settings</button></li>
  <li><button>Quit</button></li>
</ul>

CSS


        body {
  perspective: 40vw;
}

.threeD-button-set {
  --y:;
  --x:;
  --distance: 1px;
  --theme: hsl(180 100% 50%);
  --theme-bg: hsl(180 100% 50% / 25%);
  --theme-bg-hover: hsl(180 100% 50% / 40%);
  --theme-text: white;
  --theme-shadow: hsl(180 100% 10% / 25%);

  --_max-rotateY: 10deg;
  --_max-rotateX: 15deg;
  --_btn-bg: var(--theme-bg);
  --_btn-bg-hover: var(--theme-bg-hover);
  --_btn-text: var(--theme-text);
  --_btn-text-shadow: var(--theme-shadow);
  --_bounce-ease: cubic-bezier(.5, 1.75, .75, 1.25);

  /* remove  margins */
  margin: 0;

  /* vertical rag-right layout */
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2.5vh;
  
  /* create 3D space context */
  transform-style: preserve-3d;

  /* clamped menu rotation to not be too extreme */
  transform: 
    rotateY(
      clamp(
        calc(var(--_max-rotateY) * -1), 
        var(--y), 
        var(--_max-rotateY)
      )
    ) 
    rotateX(
      clamp(
        calc(var(--_max-rotateX) * -1), 
        var(--x), 
        var(--_max-rotateX)
      )
    )
  ;

  /* removes Safari focus ring on  after button interaction */
  &:focus {
    outline: none;
  }
  
  @media (--motionOK) {
    will-change: transform;
    transition: transform .1s ease;
    animation: rotate-y 5s ease-in-out infinite;
  }

  @media (--dark) {
    --theme: hsl(255 53% 50%);
    --theme-bg: hsl(255 53% 71% / 25%);
    --theme-bg-hover: hsl(255 53% 50% / 40%);
    --theme-shadow: hsl(255 53% 10% / 25%);
  }

  @media (--HDcolor) {
    @supports (color: color(display-p3 0 0 0)) {
      --theme: color(display-p3 .4 0 .9);
    }
  }
}

.threeD-button-set > li {
  /* change display type from list-item */
  display: inline-flex;

  /* create context for button pseudos */
  position: relative;

  /* create 3D space context */
  transform-style: preserve-3d; 
}
  
.threeD-button-set button {
  /* strip out default button styles */
  appearance: none;
  outline: none;
  border: none;
  -webkit-tap-highlight-color: transparent;
  
  /* bring in brand styles via props */
  background-color: var(--_btn-bg);
  color: var(--_btn-text);
  text-shadow: 0 1px 1px var(--_btn-text-shadow);

  font-size: min(5vmin, 3rem);
  font-family: Audiowide;
  padding-block: .75ch;
  padding-inline: 2ch;
  border-radius: 5px 20px;

  /* prepare for 3D perspective transforms */
  transform: translateZ(var(--distance));
  transform-style: preserve-3d;
  
  &:is(:hover, :focus-visible):not(:active) {
    /* subtle distance plus bg color change on hover/focus */
    --distance: 15px;
    background-color: var(--_btn-bg-hover);

    /* if motion is OK, setup transitions and increase distance */
    @media (--motionOK) {
      --distance: 3vmax;

      transition-timing-function: var(--_bounce-ease);
      transition-duration: .4s;

      &::after  { transition-duration: .5s }
      &::before { transition-duration: .3s }
    }
  }
  
  &::after,
  &::before {
    /* create empty element */
    content: '';
    opacity: .8;

    /* cover the parent (button) */
    position: absolute;
    inset: 0;

    /* style the element for border accents */
    border: 1px solid var(--theme);
    border-radius: 5px 20px;

    /* move in Z space with a multiplier */
    transform: translateZ(calc(var(--distance) / 3));

    /* if motion is OK, transition the Z space move */
    @media (--motionOK) {
      transition: transform .1s ease-out;   
    }
  }
  
  /* exceptions for one of the pseudo elements */
  /* this will be pushed back and have a thicker border */
  &::before {
    border-width: 3px;
    transform: translateZ(calc(var(--distance) / 3 * -1));

    /* in dark mode, it glows! */
    @media (--dark) {
      box-shadow: 
        0 0 25px var(--theme), 
        inset 0 0 25px var(--theme);
    }
  }
  
  @media (--motionOK) {
    will-change: transform;
    transition: 
      transform .2s ease,
      background-color .5s ease;
  }
}

@keyframes rotate-y {
  50% {
    transform: rotateY(15deg) rotateX(-6deg);
  }
}

JS


        import {rovingIndex} from 'https://cdn.skypack.dev/roving-ux'
   
const menu = document.querySelector('.threeD-button-set')
const menuRect = menu.getBoundingClientRect()

const { matches:motionOK } = window.matchMedia(
  '(prefers-reduced-motion: no-preference)'
)

rovingIndex({
  element: document.querySelector('.threeD-button-set'),
  target: 'button',
})

if (motionOK) {
  window.addEventListener('mousemove', ({target, clientX, clientY}) => {
    const {dx,dy} = getAngles(clientX, clientY)

    menu.style.setProperty('--x', `${dy / 20}deg`)
    menu.style.setProperty('--y', `${dx / 20}deg`)
  })
}

const getAngles = (clientX, clientY) => {
  const { x, y, width, height } = menuRect 
  
  const dx = clientX - (x + 0.5 * width)
  const dy = clientY - (y + 0.5 * height)
  
  return {dx,dy}
}