How to implement a Radial/Pie Menu in CSS3?

Question

I would like to implement a radial menu using CSS3 transforms animations similar to the third demo in this page. There is an implementation in jQuery using canvas Radmenu but it doesn't move as fluidly as the flash one.

First question would be: is this feasible? if possible using only 2D transforms and animations so it works in more platforms.

Second question: Where to do it? the simple CSS3 examples show how to translate, shear, scale and rotate simple objects. But I have no idea where to start looking for info on how to implement a menu like the flash one.

Answer 1

I would have simply replied to rsilva's comment, but unfortunately I don't have enough rep, so apologies for that.

Please feel free to borrow/steal from http://wewillbeok.com/radial, but be warned that it's definitely not the cleanest of code and isn't documented in the slightest bit. And Yi Jiang is quite right that the animations I use perform poorly on older browsers. Removing the "zoom" animation improves performance substantially.

Another well-documented and well-performing implementation is available here: http://www.webtoolkit.info/javascript-pie-menu.html, though it maybe isn't quite as "fancy."

So to more directly answer your question, I think you would be hard pressed to create such a menu using purely CSS3 animations, if that is what you're looking for, but it's absolutely feasible with a combination of JS and CSS3. The ideal implementation most likely lies somewhere between all of the examples mentioned so far.