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

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

Теперь можно раcсчитывать углы секторов меню и углы поворота пунктов. Используем такие формулы:

[угол сектора] = 360° / [количество пунктов меню]
[поворот пункта n] = (n - 1) * [угол сектора]

В нашем меню может быть максимум 6 пунктов, поэтому для него получатся такие значения:

[угол сектора] = 360° / 6 = 60°
[поворот 1 пункта] = (1 - 1) * 60° = 0°
[поворот 2 пункта] = (2 - 1) * 60° = 60°

Для вращения пунктов, мы используем rotate. Но одного вращения недостаточно, так как элементы списка будут пересекаться, ведь их угол больше 60°.

Чтобы исправить это, мы искривим пункты с помощью skew. А угол наклона посчитаем так:

[угол наклона] = 90° - [угол сектора]

В нашем случае получится 30°.

Итого: первый элемент списка нужно наклонить на 30°, а второй — повернуть на 60° и наклонить на 30°.

Кстати, возможны две записи:

transform: rotate(60deg) skew(30deg); // 1 вариант
transform: skew(30deg) rotate(60deg); // 2 вариант

Их эффект будет отличаться, так как порядок трансформаций важен. И нам нужен первый вариант.

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

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

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

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

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

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