• Теория
  • Теория

Круговое меню, шаг 2

Внутри пунктов меню расположены ссылки. Для них задан блочный тип, размеры и фон — эти исходные стили нужно просто раскомментировать.

На предыдущем шаге мы повернули и скосили пункты меню, но при этом скосилось и их содержимое, то есть ссылки. Чтобы вернуть им нормальный вид, нужно их «разнаклонить» и развернуть обратно.

«Разнаклонять» будем на противоположный угол, то есть на -30°.

Расчёт угла разворота сложнее, вот формула:

[угол разворота] = -1 * (90° – ([угол сектора] / 2))

В нашем случае получится:

[угол разворота] = -1 * (90° - (60° / 2)) = -60°

Обратите внимание на порядок трансформаций для ссылок: сначала skew, потом rotate.

И ещё одна важная деталь. Нам нужно сместить ссылки так, чтобы они располагались во внутренней половине пунктов меню. Для этого используем маргины.

Без JavaScript будущему разработчику никуда. Записывайтесь на профессиональный курс по JavaScript первого уровня, проходящий c 18 июня по 19 августа 2024. До 26 апреля цена 27 900 ₽30 900 ₽

Минимальный вид табов
  • index.html
HTML
HTML

Вы перешли на другую страницу

Кликните внутри мини-браузера, чтобы поставить фокус в это окно.

100%
Бабушка Кекс

Притормози, дружище

Проходить вызовы части «Двумерные трансформации» тренажёра «Продвинутые декоративные эффекты» можно после регистрации и оформления подписки.