[Перевод] Как сделать удобное 3D-меню на CSS30.11.2021 22:16

.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;

  /* bring in brand styles via props */
  background-color: var(--_btn-bg);
  color: var(--_btn-text);
  text-shadow: 0 1px 1px var(--_btn-text-shadow);

  /* large text rounded corner and padded*/
  font-size: 5vmin;
  font-family: Audiowide;
  padding-block: .75ch;
  padding-inline: 2ch;
  border-radius: 5px 20px;
}

Псевдоэлементы кнопок 

Границы кнопки — это не стандартные границы, а псевдоэлементы с position: absolute и границами.

Эти элементы имеют решающее значение для демонстрации трёхмерной перспективы. Один из этих псевдоэлементов отодвинется от кнопки, другой — приблизится к нему. Эффект наиболее заметен на верхней и нижней кнопках:

.threeD-button button {
  …

  &::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;
  }

  /* exceptions for one of the pseudo elements */
  /* this will be pushed back (3x) and have a thicker border */
  &::before {
    border-width: 3px;

    /* in dark mode, it glows! */
    @media (--dark) {
      box-shadow:
        0 0 25px var(--theme),
        inset 0 0 25px var(--theme);
    }
  }
}

Стили 3D-transform

Ниже transform-style установлен на preserve-3d, чтобы дочерние элементы могли располагаться по оси z. Для transform установлено пользовательское свойство --distance. Эта дистанция будет увеличиваться при наведении и фокусировке:

.threeD-button-set button {
  …

  transform: translateZ(var(--distance));
  transform-style: preserve-3d;

  &::after {
    /* pull forward in Z space with a 3x multiplier */
    transform: translateZ(calc(var(--distance) / 3));
  }

  &::before {
    /* push back in Z space with a 3x multiplier */
    transform: translateZ(calc(var(--distance) / 3 * -1));
  }
}

Стили анимации по условию

Если пользователя устраивает движение, кнопка намекает браузеру, что свойство transform должно быть готово к изменению: для свойств transform и background-color устанавливается transition. Обратите внимание на разницу в длительности: мне показалось, что это даёт хороший, тонкий ступенчатый эффект:

.threeD-button-set button {
  …

  @media (--motionOK) {
    will-change: transform;
    transition:
      transform .2s ease,
      background-color .5s ease
    ;

    &::before,
    &::after {
      transition: transform .1s ease-out;
    }

    &::after    { transition-duration: .5s }
    &::before { transition-duration: .3s }
  }
}

Стили взаимодействия Hover и Focus

Цель анимации взаимодействия — раздвинуть слои, из которых состоит плоская кнопка. Она достигается установкой переменной --distance, первоначально равной 1 px. Селектор, показанный в следующем примере кода, проверяет фокус и наведение. И, если кнопка в фокусе или курсор наведён на кнопку, применяет CSS, чтобы сделать следующее:

• применить цвет фона наведения;

• увеличить расстояние;

• добавить эффект облегчения отскока;

• ускорить переходы псевдоэлементов.

Вариация transition-duration используется только при наведении, ступенчатость анимации применяется только при наведении. При снятии наведения или фокуса каждый слой переходит к стандартному состоянию:

.threeD-button-set button {
  …

  &: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 }
    }
  }
}

3D-перспектива хороша, если пользователь предпочитает поменьше анимации. Верхний и нижний элементы показывают приятный эффект.

Небольшие улучшения с помощью JavaScript

Интерфейс уже можно использовать с клавиатуры, скринридеров, геймпада, сенсорного ввода и мыши, но мы можем добавить несколько лёгких штрихов JavaScript.

Поддержка клавиш со стрелками

Клавиша табуляции — отличный способ навигации по меню, но хотелось бы, чтобы на геймпаде фокус перемещался с помощью курсора или джойстиков. Библиотека roving-ux, часто используемая для интерфейсов GUI Challenge, будет обрабатывать клавиши со стрелками. Приведённый ниже код указывает библиотеке перехватить фокус внутри .threeD-button-set и перенаправить его на дочерние кнопки:

import {rovingIndex} from 'roving-ux'

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

Параллаксное взаимодействие мыши

Отслеживание мыши и наклон меню призваны имитировать интерфейсы видеоигр AR и VR, где вместо мыши у вас может быть виртуальный указатель. Это может быть забавно, когда элементы хорошо осведомлены об указателе.

Поскольку это небольшая дополнительная функция, мы поместим взаимодействие за запрос предпочтений пользователя о движениях. Кроме того, сохраните компонент списка кнопок в памяти с помощью querySelector и кешируйте границы элемента в menuRect. Используйте эти границы для определения смещения поворота, применяемого к карточке в зависимости от положения мыши.

const menu = document.querySelector('.threeD-button-set')
const menuRect = menu.getBoundingClientRect()

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

Далее нам нужна функция, принимающая позиции мыши x и y и возвращающая значение, которое мы можем использовать для поворота карточки. Следующая функция использует положение мыши, чтобы определить, с какой стороны блока она находится и на сколько. Дельта возвращается из функции.

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}
}

Следите за движением мыши, передавайте позицию в функцию getAngles () и используйте значения дельты в качестве стилей пользовательских свойств. Я разделил на 20, чтобы сгладить дельту и сделать её менее дёрганой, возможно, есть лучший способ сделать это. Как вы помните, в самом начале мы поместили реквизиты --x и --y в середину функции clamp (), это предотвращает чрезмерный поворот карточки в нечитаемое положение.

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

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

Перевод и направления письма

При тестировании игрового меню в других режимах написания и языках возникла одна загвоздка.

Элементы имеют стиль ! important для writing-mode в стилях браузера пользователя. Это означало, что HTML нужно было изменить, чтобы приспособить его к желаемому дизайну. Замена списка кнопок на список ссылок позволяет использовать логические свойства для изменения направления меню, поскольку элементы не имеют установленного браузером стиля ! important.

Код статьи на Github.

Видео-версия

На сегодня всё. Продолжить изучение CSS вы сможете на наших курсах:

Профессии и курсы

Data Science и Machine Learning

Python, веб-разработка

Мобильная разработка

Java и C#

От основ — в глубину

А также:

© Habrahabr.ru