- Теория
- Теория
Круговое меню, шаг 2
Внутри пунктов меню расположены ссылки. Для них задан блочный тип, размеры и фон — эти исходные стили нужно просто раскомментировать.
На предыдущем шаге мы повернули и скосили пункты меню, но при этом скосилось и их содержимое, то есть ссылки. Чтобы вернуть им нормальный вид, нужно их «разнаклонить» и развернуть обратно.
«Разнаклонять» будем на противоположный угол, то есть на -30°
.
Расчёт угла разворота сложнее, вот формула:
[угол разворота] = -1 * (90° – ([угол сектора] / 2))
В нашем случае получится:
[угол разворота] = -1 * (90° - (60° / 2)) = -60°
Обратите внимание на порядок трансформаций для ссылок: сначала skew
, потом rotate
.
И ещё одна важная деталь. Нам нужно сместить ссылки так, чтобы они располагались во внутренней половине пунктов меню. Для этого используем маргины.
- index.html
Вы перешли на другую страницу
Кликните внутри мини-браузера, чтобы поставить фокус в это окно.