Как реализовать Radial / Pie Menu в CSS3?

Question

Я хотел бы реализовать радиальное меню , используя CSS3-трансформации анимации, подобные третьей демонстрации на этой странице . В jQuery есть реализация с использованием canvas Radmenu , но она движется не так плавно, как Flash.

Первый вопрос будет: это возможно? по возможности, используя только 2D-трансформации и анимацию, чтобы она работала на большем количестве платформ.

Второй вопрос: где это сделать? Простые примеры CSS3 показывают, как переводить, сдвигать, масштабировать и вращать простые объекты. Но я понятия не имею, с чего начать поиск информации о том, как реализовать меню, подобное флэш-меню.

Answer 1

есть смотрите здесь

, это превращает выбор в круговое меню, стилизованное через css, а не такое необычное, как указано выше.

Answer 2

Я бы просто ответил на комментарий rsilva, но, к сожалению, мне не хватает представителя, поэтому извиняюсь за это.

Пожалуйста, не стесняйтесь заимствовать / красть у http://wewillbeok.com/radial,, но будьте осторожнычто это определенно не самый чистый код и не документирован ни в малейшей степени.И И Цзян совершенно прав, что анимация, которую я использую, плохо работает в старых браузерах.Удаление анимации «зума» существенно повышает производительность.

Здесь доступна еще одна хорошо документированная и хорошо работающая реализация: http://www.webtoolkit.info/javascript-pie-menu.html,, хотя, возможно, она и не такая «причудливая».

Так что, чтобы более прямо ответить на ваш вопрос, я думаю, вам будет сложно создать такое меню, используя чисто CSS3-анимацию, если это то, что вы ищете, но это абсолютно выполнимо сСочетание JS и CSS3.Идеальная реализация, скорее всего, лежит где-то между всеми упомянутыми примерами.

Answer 3

По большей части должен быть какой-то слой Javascript, так как вам нужно рассчитать распределение предметов.CSS3 может использоваться, чтобы помочь масштабированию и вращению элементов, выполняя преобразования.Они работают на Chrome, Safari, IE9 +, FireFox 3.5+ и Opera 11+.

Я создал плагин некоторое время назад, плагин jQuery Radmenu (Radial menu).Я работаю над хорошей демонстрацией его использования (я не дизайнер, и это занимает у меня некоторое время), но чтобы получить представление о силе плагина, вы можете проверить http://www.tikku.com/jquery-radmenu-plugin#radmenu_tutorial_4 для некоторых примеров,

Спецификация API есть и доступна для скачивания.Не стесняйтесь раскошелиться на GitHub, если вы хотите учиться.https://github.com/nirvanatikku/jQuery-Radmenu-Plugin

Не стесняйтесь пинговать меня, если у вас есть какие-либо вопросы