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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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