如何在CSS3中实现径向/饼图菜单？

Question

我想使用CSS3变换动画实现radial menu，类似于此page中的第三个演示。 jQuery中有一个使用canvas Radmenu的实现，但它不像flash那样流畅。

第一个问题是：这可行吗？如果可能的话，仅使用2D变换和动画，以便它可以在更多平台上运行。

第二个问题：去哪做？简单的CSS3示例展示了如何平移，剪切，缩放和旋转简单对象。但我不知道从哪里开始寻找有关如何实现像flash一样的菜单的信息。

Answer 1

我会简单地回复rsilva的评论，但不幸的是我没有足够的代表，所以道歉。

请随意从http://wewillbeok.com/radial借用/窃取，但请注意，它绝对不是最干净的代码，并且没有记录在案。而Yi Jiang是正确的，我使用的动画在旧浏览器上表现不佳。删除“缩放”动画可以显着提高性能。

另一个记录良好且表现良好的实现可以在这里找到：http://www.webtoolkit.info/javascript-pie-menu.html，虽然它可能不那么“花哨”。

所以为了更直接地回答你的问题，我认为你很难用纯粹的 CSS3动画创建这样的菜单，如果你正在寻找它，但它绝对可行JS和CSS3的组合。理想的实现很可能介于目前为止提到的所有示例之间。

Answer 2

有一个look here

这会将一个选择变成一个饼图菜单，通过css设置样式，而不是像上面那样花哨。

用法：$("#your-selectbox-id").pieselmenu($(this));

Answer 3

在大多数情况下，必须有一些Javascript图层，因为您需要计算项目的分布。 CSS3可用于通过执行变换来辅助元素的缩放和旋转。它们适用于Chrome，Safari，IE9 +，FireFox 3.5+和Opera 11+。

我前段时间创建了一个插件，jQuery Radmenu（Radial菜单）插件。我正在研究它的一个很好的使用演示（我不是设计师，它花了我一些时间），但为了了解插件的强大功能，你可以查看http://www.tikku.com/jquery-radmenu-plugin#radmenu_tutorial_4的一些例子。

API规范已经存在并可供下载。如果你想学习，也可以随意将它从GitHub上卸下来。 https://github.com/nirvanatikku/jQuery-Radmenu-Plugin

如果您有任何问题，请随时与我联系